javascript - 滚动时 float 导航栏宽度

Question

我有一个导航栏，当页面向下滚动时它会向下 float 。我想要做的是让导航栏的宽度与 <div class="jumbotron"> 相同这样它们就可以在所有类型的设备上很好地匹配。我已经尝试和研究了很多东西，但是当尺寸变小时它不想工作。如果页面在监视器上打开，一切都正确，但我遇到的问题是当我尝试缩小导航栏应该开始折叠的速度时，它在移动设备上更容易。我只是想让他们排好队。对此的任何帮助将不胜感激!

http://jsfiddle.net/ncnzwqxv/

CSS

@media (min-width: 768px) { 

.navbar-collapse ul {
    margin-top: 7px; 
} 
}   


.navbar-collapse .navbar-nav.navbar-left:first-child { 
    margin-left: 0px; 
}


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color:#FFF;
    border-color: #FFF;
    color: #000;
}

.nav-pills {
    margin-bottom:7px;
    padding-right:30px;
    font-weight:bold;
}

.dropdown-menu > li > a {   
    color: #428BCA;
    font-weight:bold;
}

.navbar {
    position:fixed;
    top:0;
}

.navbar-default .navbar-collapse{
    display:inline-block !important;
}

.navbar-collapse{
    float:right !important;
}

.container {
    margin-top:100px;
}

#test{
    width:1140px;
}

body {
    background-color:#FFF;
}

HTML

<div class="container">

    <!-- Static navbar -->
      <div id="test" class="navbar navbar-default">
      <div class="navbar-header">
       <a class="navbar-brand" rel="home" href="#"><img src="http://dummyimage.com/44x20/000/fff&amp;text=logo"></a> 
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-right nav-pills">
                <li role="presentation" class="active"><a href="./">Link</a></li>
                <li role="presentation"><a href="../navbar-fixed-top/">Link</a></li>
                    <li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Link<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="../navbar-fixed-top/">Link 1></li>
                            <li><a href="../navbar-fixed-top/">Link 2</a></li>
                        </ul>
                <li role="presentation"><a href="../navbar-static-top/">Getting Started</a></li>
            </ul>
        </div><!--/.nav-collapse -->
      </div>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

</div> <!-- /container -->

Answer 1

参见 http://jsfiddle.net/gilla/ncnzwqxv/6/

您可以通过在单独的元素上使用容器而不是包装它们来解决这个问题。

另外，给你的导航栏一个包装器来做固定定位。

[HTML] 添加容器类到导航栏

<div class="wrapper">
  <div id="test" class="container navbar navbar-default">
  <div class="navbar-header">
    .............

[CSS]固定定位的包装样式规则

.wrapper {
    left: 0;
    position:fixed;
    right: 0;
    top:0;
}

[HTML] 将容器类添加到 jumbtrons

  <div class="jumbotron container first">
    <h1>Navbar example</h1>
    <p>This example is a quick ex..........

附带说明，我删除了导航栏上的固定宽度，以下规则导致您的导航栏不折叠...

[CSS] 已移除

.navbar-default .navbar-collapse{
    display:inline-block !important;
}

#test{
   width:1140px;
}