html - BootStrap 3.1.1 导航栏

标签 html css twitter-bootstrap twitter-bootstrap-3

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

  1. 我也对所有 Nav 使用了容器类。这是正确的实现吗?如果我不使用容器类来导航,它会超过容器的宽度。所以我不得不使用它。有人可以确认其实现是否正确吗?

  2. 当我单击任何按钮时,MainContent 子 div 的向上滑动或向下滑动,一旦它穿过导航栏。我希望它被隐藏(你在导航栏上方看到的滚动 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>

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

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

最佳答案

  1. 您可以添加容器。执行没问题

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

关于html - BootStrap 3.1.1 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23976855/

相关文章:

javascript - fabricjs 在某些事件不起作用时更改边框大小和颜色

javascript - CSS - 选择器以最大顺序定位元素?

html - 更改 Bootstrap 导航栏的大小

jquery - 静态导航栏下的 Bootstrap 轮播图片

html - 将列内容与 Bootstrap 4 对齐

html - 带有 "display: table"子元素的 Microsoft Edge 上奇怪的 <li> 高度错误

javascript - 响应式悬停内容 div 到不同的位置

html - Bootstrap 的 'select' 不适用于较小的设备

html - CSS3 悬停过渡奇怪的行为

html - 带有水平子菜单的 CSS 下拉菜单