Navbar mit Bootstrap klappt nicht wieder ein?

Hallo zusammen, ich habe folgendes Problem:

Ich habe das erste Navbar-Beispiel aus der Bootstrap-Dokumentation kopiert https://getbootstrap.com/docs/5.3/components/navbar/). Dort klappt die Navbar auf kleinen Bildschirmen beim Klick auf die drei Striche auf und nach einem zweiten Klick wieder zu. Bei mir ist es aber so, dass sich die Navbar nicht wieder einklappen lässt, nachdem man sie geöffnet hat (Nur bei Klick auf einen Link in der Navbar lässt sie sich zuklappen, nicht bei weiterem Klick auf die drei Striche). Hier mein Code: https://pastebin.com/kUnYBVkY

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

30.07.2023, 20:53

Du hast die JavaScript-Ressource für Bootstrap doppelt eingebunden.

Entweder du entfernst die script-Tags, die popper.min.js und bootstrap.min.js inkludieren (denn beide Bibliotheken sind bereits in bootstrap.bundle.min.js enthalten) oder du entfernst nur die Referenz auf die bootstrap.bundle.min.js.

derjona464

Beitragsersteller

30.07.2023, 21:07

Perfekt, danke dir!

Ähnliche Beiträge

Bootstrap lässt sich nicht überschreiben?

Hey,
Ich habe das Problem das folgender Code im css:

@media (min-width: 992px) {

.navbar-expand-lg {

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;

-ms-flex-pack: start;

justify-content: flex-start;

}

Schon aus meiner DAtei die das bootstrap css überschreiben soll genommen wird. Wenn ich den Wert 992 aber zu einem anderen Ändere nicht mehr. Würde aber gerne den Wert aus meiner CSS-datei heraus überschreiben. Und damit das Hamburger Menü immer anzeigen und nicht nur für kleine Bildschirme
Danke :)

...zum Beitrag

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zum Beitrag

Wie kann man Untertitel bei einem Bootstrap Slider über das ganze Bild gehen lassen?

Hallo,

Da der Slider erst einmal den wichtigsten Satz zeigen soll, der eigentliche Text aber viel länger ist, würde ich gerne die Untertitel meines Bootstrap Sliders beim hovern über das ganze Bild gehen lassen...

--> Hinter den Untertiteln liegt ein roter, halbtransparenter, Balken und dieser sollte sich beim hovern über das ganze Bild ziehen und der ganze Text soll erscheinen.

hier der html-code:

<h5>Dies ist ein Beispielbild</h5>

<button type="button" class="btn btn-link">Mehr lesen</button>

</div>

-->den Button "mehr lesen" bräuchte ich dann nicht (außer ihr habt eine Idee wie man dies umsetzt)

--> den Balken habe ich in einem Bildbearbeitungsprogramm eingefügt, vielleicht weiß jemand ja auch noch wie ich den in html und css in den Slider einbauen kann :D

so sieht die css Datei jetzt noch aus:

.carousel-caption{

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

}

mehr habe ich da bis jetzt noch nicht drin stehen.

Da ich mich noch nicht so gut mit html, css und Bootstrap auskenne, bin ich für jede Hilfe dankbar :)

Vielen Dank schonmal im Vorraus!

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Bootstrap owl carousel höhe bearbeiten?

Hallo zusammen,

Ich bin gerade am bearbeiten eines Website Templates, welches mit Bootstrap geschrieben wurde. Nun möchte ich die hero section, welche durch das owl carousel funktioniert so anpassen, dass die Section auch auf Mobilgeräten die gesamte Höhe des Bildschirms einnimmt. Weiß jemand, was ich dafür verändern muss?

...zum Beitrag

HTML Seite zentrieren und Seitenränder einstellen?

Hallo, ich habe meine Startseite zentriert und will auch, dass die Seite wie bei den meisten Webseiten in der Mitte platziert ist und nicht auf der ganzen Seite, also wie z.B. hier:

Könnt ihr mir helfen, welchen Befehl ich dafür verwenden muss?

Wenn ich das Fenster verkleinere oder im Handy aufrufe, sollte die sich dann anpassen.

Danke im Voraus.

...zum Beitrag

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

Bootstrap Hyperlink?

Möchte gerne web.html öffnen. Wenn ich eine https Adresse einfüge, geht es problemlos.

Was mache ich falsch?

...zum Beitrag

Bootstrap 5.3 Dropdown Pfeil?

Hallo, in einem Dropdown was ich mit Bootstrap erstelle wird der Pfeil unten statt auf der rechten Seite angezeigt

Hier ist der HTML Code von dem Toggle Button des Dropdowns:

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   <div class="d-flex">
      <span class="material-symbols-outlined">language</span>
      <span class="ms-2">Automatisch</span>
   </div>
</button>

Ich hab schon herausgefunden das der Fehler vom Div kommt, allerdings wenn ich das Div Entferne sieht es so aus:

Wie man sieht ist dort, dann allerdings das Icon nicht mehr Zentriert. Weiß jemand wie man entweder die Positionierung vom Dropdown Pfeil oder die Ausrichtung vom Icon in Ordnung bringen kann.

Vielen Dank schon mal im Voraus für jede Antwort!

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

Wie kann ich eine Tabelle Handytauglich mit Bootstrap Grid machen?

Hallo,

ich habe eine Tabelle mit bootstrap grit in der form

heder header header ...

value1 value1 value1

value2 value2 value2

...

wenn das ganze auf Handygröße eingestampft wird erhalte ich

header

value1

value2

wie könnte ich so ein Layout realisieren

header

value1

header

value1

header

value1

header

value2

...

oder

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen