html - 在两级 Bootstrap 导航栏上，我无法使顶部保持固定

Question

使用 bootstrap，我正在创建一个两级导航栏，我希望顶部的深蓝色部分在滚动时保持固定，但是当我给 .navbar-default .navbar-collapse 一个 position:fixed 时，中间部分被砍掉。知道为什么会发生这种情况以及如何解决它吗？

这是我的代码:

<header id="header">
<nav class="navbar navbar-default hidden-sm hidden-xs" role="navigation">
  <div class="navbar-collapse navbar-azul">
    <ul class="nav navbar-nav navbar-left navbar-azul">
      <li class="uppercase"><a href="#">One</a></li>
      <li class="uppercase"><a href="#">Two</a></li>
      <li class="uppercase"><a href="#">Three</a></li>
      <li class="uppercase"><a href="#">Four</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right navbar-azul">
      <li class="white"><a href="#" target="_blank" class="nav-facebook" style="padding-left: 5px; padding-right: 5px;"><i class="fa fa-facebook" ></i></a></li>
      <li><a href="#" target="_blank" class="nav-twitter" style="padding-left: 5px; padding-right: 5px;"><i class="fa fa-twitter" ></i></a></li>
      <li><a href="#" target="_blank" class="nav-instagram" style="padding-left: 5px; padding-right: 5px;"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#" target="_blank"class="nav-youtube" style="padding-left: 5px; padding-right: 0;"><i class="fa fa-youtube-play"></i></a></li>
      <li><a href="#" target="_blank" class="nav-video" style="padding-left: 5px;"><i class="fa fa-play-circle-o"></i>Videos</a>
      </li>
      <li><a href="#" target="_blank"><i class="fa fa-television"></i>Shows</a>
      </li>
    </ul>
  </div>
</nav>        
<div class="navbar navbar-inverse" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="index.html">
        <h1><img src="images/logo.png" class="logohead img-responsive" alt="logo"></h1>
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left navbar-celeste-text">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li class="dropdown "><a href="#">Menu 3 <i class="fa fa-angle-down"></i></a>
          <ul role="menu" class="sub-menu">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>                    
        <li><a href="#">Menu 3</a></li>           
        <!-- <li><a href="#">Antigua Sports</a></li>   -->
        <li><a href="#">Menu 4</a></li>  
        <li class="uppercase visible-sm-block visible-xs-block"><a href="#">One Small Screen</a></li>
        <li class="uppercase visible-sm-block visible-xs-block"><a href="#">Two Small Screen</a></li>
        <li class="uppercase visible-sm-block visible-xs-block"><a href="#">Three Small Screen</a></li>
        <li class="uppercase visible-sm-block visible-xs-block"><a href="#">Four Small Screen</a></li>
        <li class="visible-sm-block visible-xs-block"><a href="#"><i class="fa fa-play-circle-o"></i>Videos</a></li>  
        <li class="visible-sm-block visible-xs-block"><a href="#"><i class="fa fa-television"></i>Shows</a></li> 
        <li class="visible-sm-block visible-xs-block">
          <div class="search">
            <form role="form">
              <i class="fa fa-search"></i>
              <div class="field-toggle">
                <input type="text" class="search-form" autocomplete="off" placeholder="Search">
              </div>
            </form>
          </div>
        </li>                    
      </ul>
    </div>
    <div class="search hidden-sm hidden-xs">
      <form role="form">
        <i class="fa fa-search"></i>
        <div class="field-toggle">
          <input type="text" class="search-form" autocomplete="off" placeholder="Search">
        </div>
      </form>
    </div>
  </div>
</div>

还有 CSS:

#header{
 margin-bottom: 0;
 padding: 0 0 30px 0;
 margin: 0 auto;
 width:100%;
 z-index:999;
 background:#00b1ec;
 }

#header .navbar-inverse .container{
 position: relative;
}

.pull-right {
  right:50px;
  position:absolute; 
  top:15px
  }

#header .navbar {
 border: 0;
 margin-bottom: 0;
 }

#header .navbar-toggle{
 margin-top: 20px;
}

#header .navbar-brand{
  padding: 0;
  margin-left: 0;
 }

#header .navbar-brand h1{
  padding: 0;
  margin: 0;
 }

#header .navbar-nav.navbar-left >li:last-child{
 margin-left: 20px;
}

#header .navbar-nav.navbar-left >li a {
 color: #fff;
 font-weight: 400;
}

.navbar-default .navbar-collapse {
 position: fixed;
 z-index: 999;
}

.navbar-default .navbar-collapse, .navbar-inverse .navbar-nav>li>a {
 color: #fff;
}

.navbar-azul-text {
  color: #fff;
  font-size: 14px;
}

.navbar-celeste-text{
  color: #fff;
  font-size: 18px;
}

.navbar-default .navbar-nav>li>a{
 color:#fff;
}

#header .navbar-inverse .navbar-nav  li.active > a,  
#header .navbar-inverse .navbar-nav  li.active > a:focus, 
#header .navbar-nav.navbar-left li > a:hover,
.navbar-inverse .navbar-nav > .open > a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  background-color: inherit;
  border: 0;
  color: #E61F47;
 }

Answer 1

你有两个选择:

1. 将 navbar-fixed-top 类添加到带有 navbar 类的 nav 标签，并删除带有 position 的 css:固定。

2. 将 width: 100% 添加到您的 CSS (.navbar-default .navbar-collapse)。