Question

我已将bootstrap 4导航栏添加到我的网站。当我减小veiwport且导航栏折叠时，导航项不是完整宽度，此外，当您单击它们时，它们会覆盖下面的页面，而不是向下推页面（尽管我对此并不打扰，只是对为什么感到好奇）。我在导航栏编码方面有些挣扎，但是引导程序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>

Answer 1

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

（2）：因为您有{{1}，因此可能会生成“ 单击它们会覆盖下面的页面，而不是向下推页面”。 }设置在导航栏上，检查CSS样式。

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

position: abosolute

bootstrap 4 nav折叠时不全宽

1 个答案: