Question

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

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;
}

Answer 2

您可以使用Bootstrap中的默认媒体查询将导航栏直接缩放到容器类通常缩小的相同尺寸。但我认为你的标记还有其他一些时髦的东西。我不能完全指责它。

@media (min-width: 1200px) {
    #test{
        width:1140px !important;
    } 
}
@media (min-width: 992px) and (max-width: 1199px) {
    #test{
        width: 940px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #test{
        width: 720px !important;
    }
}
@media (max-width: 767px) {
    #test{
        width: 100% !important;
    }
}

JSSfiddle

浮动导航栏宽度作为滚动

2 个答案: