Bootstrap 调整大小折叠导航栏

Question

我正在编写我的文凭，我必须使用 Bootstrap 为一家公司编写一个网页。我的实际问题是，当我的导航栏折叠我的导航项后面的彩色容器时，它只会在单词结束的地方结束。像这样：

enter image description here

我真的不是最好的程序员，所以我只能向你们展示我的 php 和我的 css 代码。它最终应该是这样的：

enter image description here

所以它应该与窗口具有相同的宽度。但只是在折叠视图中。

.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

尝试将其添加到您的 CSS：

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

这会获取 navbarCollapse ID 并将其拉伸到屏幕的 100%