Question

以下是使用bootstrap 3.1.1的当前Navbar实现的链接。

我也将容器类用于所有Nav。这是正确的实施吗？如果我不使用容器类导航，它超过了Container的宽度。所以我不得不使用它。有人可以确认它是否是正确的实施方式？
当我点击任何按钮时，MainContent Child div一旦它越过导航栏就会向上滑动或向下滑动。我希望它被隐藏（在Nav Bar上方滚动显示div），但它没有隐藏。我试图在Nav上面再添加一个div，但即使它超出了容器的宽度，但它的内部容器也是如此。所以我也尝试使用容器类，它工作正常，但是当我将浏览器调整为小尺寸时，div消失了，我再次看到mainContent子项可以移动导航栏。

HTML

<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
   <head>

   </head>
   <body>
   <div class="container">  
    <div id="header">
      <nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
          <div class="container inside-bar">  
                 <ul class="nav navbar-right">
                    <li class="active"><a href="#about">About</a></li>
                    <li><a href="#Services">Services</a></li>
                    <li><a href="#OurStaff">Our Staff</a></li>
                    <li><a href="#book">book</a></li>
                    <li><a href="#Gift">Gift Cards</a></li>
                    <li><a href="#Reviews">Reviews</a></li>
                 </ul>
          </div>  
        </nav>
    </div>
          <div id="mainContent">
            <div id='Services' class="box">
               Services
            </div>
            <div id='about' class="box">
               About
            </div>
            <div id='OurStaff' class="box">
               Our Staff
            </div>
            <div id='book' class="box">
               book
            </div>
            <div id='Gift' class="box">
               Gift
            </div>
            <div id='Reviews' class="box">
               Reviews
            </div>
         </div> 
      </div>
   </body>
</html>

目前在链接中，您将看不到我在导航之前添加的Div。

http://codepen.io/anon/pen/DmiGs

Answer 1

您可以添加容器。实施没问题

 .navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}

BootStrap 3.1.1 NavBar

1 个答案: