折叠时引导程序 4 导航不是全宽答案

【问题标题】：bootstrap 4 nav not full width when collapsed折叠时引导程序 4 导航不是全宽
【发布时间】：2019-01-13 22:49:01
【问题描述】：

我在我的网站上添加了一个 bootstrap 4 导航栏。当我减少 veiwport 并且导航栏折叠时，导航项不是全宽，此外，当您单击它们时，它们会覆盖下面的页面而不是将页面向下推（尽管我对此并不担心，只是好奇为什么） . 我在导航栏编码方面有点挣扎，但 bootstrap 4 打败了我；

我的网站在这里：http://ccgi.unclezen.plus.com/dev/onwbc/test.php

我的导航栏代码在这里：

<div class="row navholder justify-content-center">
<nav class="navbar navbar-expand-lg justify-content-center">
    <!-- Toggler/collapsible Button using Fontawesome icon -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"><i class="fas fa-bars burger"></i></span>
    </button>   
  <div class="collapse navbar-collapse colour1bg" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item central">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link2</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link3</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link4</a>
      </li>    
      <li class="nav-item central">
        <a class="nav-link" href="#">Link5</a>
      </li>    
      <li class="nav-item central">
        <a class="nav-link" href="#">Link6</a>
      </li> 
    </ul>
  </div>
</nav>
</div>

【问题讨论】：

行类仅用于包含列，不用于导航栏。

标签： bootstrap-4

【解决方案1】：

(1) 包装器上的row 类与positon:absolute 样式结合可能会产生宽度问题，只需将其删除即可。

(2) 这：“当你点击它们时，它们会覆盖下面的页面而不是向下推页面”也可以生成，因为你设置了position: abosolute在您的导航栏上，检查您的 CSS 样式。

您可以检查下一个示例，它按预期工作：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navholder justify-content-center">
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
  <!-- Toggler/collapsible Button using Fontawesome icon -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>   
  <div class="collapse navbar-collapse colour1bg" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item central">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link2</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link3</a>
      </li>
      <li class="nav-item central">
        <a class="nav-link" href="#">Link4</a>
      </li>    
      <li class="nav-item central">
        <a class="nav-link" href="#">Link5</a>
      </li>    
      <li class="nav-item central">
        <a class="nav-link" href="#">Link6</a>
      </li> 
    </ul>
  </div>

</nav>
</div>

<p>some text...</p>

【讨论】：

谢谢，我只需要一些指示。我删除了我在将 justify-content-center 类添加到 UL 元素中的导航栏的行，以便导航居中这使得导航栏在折叠时打开我想要的方式，全宽并向下推页面但是那里是导航栏元素末端的一个间隙，它与上面的元素不对齐，这是通过在 .navbarCustom { margin-left: -15px; 下面添加自定义类来解决的。边距右：-15px； }
我的会员太新了，我不能用绿色勾号标记
请注意，当我指向删除 row 时，我只是引用了该类，而不是整个 div，如我的示例所示。无论如何，我很高兴这对您有所帮助，您可以在有权限时标记它，不用担心。