css - 导航栏右侧不起作用

Question

不言自明。为什么 navbar-right 不关闭右边的两个导航栏元素？我已经添加了正确的代码，所以我很困惑为什么它不起作用。

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-="data-" toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav navbar-left">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#about">About</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#services">Products</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您需要关闭折叠按钮，并且您在该标签的属性中有一堆错误。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
  <div class="container">
    <button class="navbar-toggle navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">menu</button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav navbar-left">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#about">About</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#services">Products</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
      </ul>
    </div>
  </div>
</nav>