Question

您好我正在尝试使用Bootstrap 4布局我的导航栏，但是有些原因无论是不是调用它。它适用于我的Google开发人员检查器，但是当我在文本编辑器中插入相同的代码时，没有任何反应。有人能帮助我理解我做错了什么吗？

HTML code：

    <body>
          <!--TOP Navigation -->

      <nav class="navbar navbar-default  navbar-toggleable-md ">
         <div class="container">
           <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>




           <a href="index.php" class="navbar-brand">Delvin McCray</a>

           <!-- Right Side of Navbar w/ Dropdown Fatures-->
             <ul class="nav navbar-nav">
               <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Women <span class="caret"></span></a>

                 <!--Dropdown Menu-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Shirts</a></li>
                     <li><a href="#">Dresses</a></li>
                     <li><a href="#">Shoes</a></li>
                     <li><a href="#">Accessories</a></li>

                 </ul><!--end of dropdown menu-->
               </li>

               <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men <span class="caret"></span></a>

                 <!--Dropdown Menu-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Shirts</a></li>
                     <li><a href="#">Dresses</a></li>
                     <li><a href="#">Shoes</a></li>
                     <li><a href="#">Accessories</a></li>

                 </ul><!--end of dropdown menu-->
               </li>

               <li><a href="#">Off the Rack</a></li>
                 <li><a href="#">Fall 2017</a></li>

             </ul><!--End of navbar-right-->
        </div>
        <!-- Right side Navbar -->
             <div class="collapse navbar-collapse justify-content-end" 
        id="navbarCollapse">
        <ul class="navbar-nav">
         <li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
        hidden="true"></i> </a></li>
         <li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag" 
        aria-hidden="true"></i></a></li>

           </ul>
         </div>
        </div>
       </nav>



    </body>

      <div class="jumbotron">
        <div class="col-sm-8 mx-auto">
          <h1>Navbar examples</h1>
          <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
          <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
          <p>
            <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
          </p>
        </div>
      </div>



      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


    </body>
</html>

CSS样式：

body {
  padding-top: 50px;

}

.dropdown, .dropup {
position: relative;
margin-right: 20px;
}


.nav li {
  margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}

Bootstrap 4 Navbar间距问题

0 个答案: