Question

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

meteor add modules@0.9.1

Answer 1

您需要关闭崩溃button，并且该标记的属性中存在大量错误。

＆＃13;

<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>

＆＃13;

Answer 2

这是你想要的吗？将navbar-right添加到该两个<ul>元素的父元素中，然后将其从<ul>中删除：

<div class="collapse navbar-collapse navbar-right" id="navbarResponsive">

nav {
  margin-top: 100px; /* ignore this, just to show example at stackoverflow*/
}

<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-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">My Menu</button>
    <div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
      <ul class="nav navbar-nav">
        <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">
        <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>

navbar-right不起作用

2 个答案: