当屏幕宽度较小时，我页面的某些部分无法选择导航栏链接

Question

所以我正在开发一个 bootstrap 网站，可以在以下位置看到：

页面有 5 个部分 Home/About Us/Services/Portfolio/Request 引用。当页面在小屏幕上并且导航栏折叠到该菜单按钮时。当我在某些页面上时，我无法正确 select 所有链接。例如，在主页上，折叠时一切正常。但是，如果我转到“关于我们”部分，我只能 select "Portfolio" 或 "Request a Quote" 部分。请求报价部分只允许我 select "Portfolio" 部分。我觉得这很奇怪，因为我的导航栏代码对于每个栏都是相同的，除了活动标签。

这是我的导航栏代码：

<nav class="navbar navbar-default">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#"><img src="images/AVwood.png" height="40px"></a>

    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link" href="http://stephenhyatt.com/avwood.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="http://stephenhyatt.com/avaboutus.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://stephenhyatt.com/avservices.html">Services</a>
      </li>
      <li><a class="nav-link" href="http://stephenhyatt.com/avportfolio.html">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://stephenhyatt.com/avquote.html">Request a Quote</a>
      </li>
    </ul>
  </div>
</nav>

我也在用：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">

和

   <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

Answer 1

您忘记将 class="nav-item" 添加到投资组合 <li> 标签。

当屏幕宽度较小时，我页面的某些部分无法选择导航栏链接

Navbar links not selectable in certain parts of my page when the screen width is smaller

navbar

twitter-bootstrap

bootstrap-4