Question

所以我正在开发一个自助网站，可以在以下网址看到：

页面的5个部分主页/关于我们/服务/投资组合/索取报价。当页面在小屏幕上并且导航栏折叠到该菜单按钮时。当我在某些页面上时，我无法正确选择所有链接。例如，在主页崩溃时，一切正常。但是，如果我转到“关于我们”部分，我只能选择“投资组合”或“请求报价”部分。请求报价部分仅允许我选择“投资组合”部分。我发现这很奇怪，因为我的导航栏代码对于每个栏都是相同的，但有效标签除外。

这是我的Navbar代码：

<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>代码。

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

1 个答案: