Bootstrap 调整大小折叠导航栏

Question

I'm writing my Diploma where I have to programm a Webpage for a Company using Bootstrap. My actuall problem is that when my navbar collaps the colored container behind my nav-items just ends where the word ends. Like This:

enter image description here

I'm really not the best programmer so i just can show you guys my php and my css code. It finally should look like this:

enter image description here

So it should have the same width as the window. But just in the collapsed view.

 .navbar-collapse{ background-color: #62615F; }.nav-item{ background-color: #62615F; }.nav-item:hover{ background-color: lightgray; }.active{ color: white; }.active:hover{ color: black; }.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus { outline: none; box-shadow: none; }

 <header> <nav class="navbar navbar-expand-xxl fixed-top text-large"> <div class="container-fluid"> <div class="d-flex align-items-start"> <a class="navbar-brand" href="../Startseite/Bootstrap2.php"><img src="Firmenlogo.png" id="logo" alt="Logo" class="responsive-img" width="300"></a> </div> <div class="float-right"> <button class="navbar-toggler navbar-dark pull-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav"> <?php if(isset($_SESSION["berechtigung"])){?> <li class="nav-item"> <a class="nav-link active" id="bearbeiten" aria-current="page" href="../Admin/Bearbeiten.php">Bearbeiten</a> </li> <?php }?> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="../Startseite/Bootstrap2.php">Home</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="../Unternehmen/Unternehmen.php">Unternehmen</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="../Links/Links.php">Links</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="../Impressum/Impressum.php">Impressum</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="true" href="../AGB/AGB.php">AGB</a> </li> <li class="nav-item"> <a class="nav-link active" href="../Kontakt/Kontakt.php">Kontakt</a> </li> <li class="nav-item"> <?php if($angemeldet) {?> <a class="nav-link active" href="../Login/Login.php" id="eingeloggt"> <?php echo $_SESSION["name"]; ?> </a> <?php }else{?> <a class="nav-link active" href="../Login/Login.php" id="login"></a> <?php }?> </li> </ul> </div> </div> </div> </nav> </header>

Answer 1

Try adding this to your CSS:

#navbarCollapse {
    width: 100%;
    position: fixed;
}

This takes the navbarCollapse ID and stretches it to 100% of the screen