Question

我正在努力在Bootstrap中实现双导航系统。我想要的效果是顶部导航栏随着屏幕尺寸的减小而不可折叠和不可更改（这在视觉上不会有问题，因为我在顶部导航栏上只有一个徽标和登录/向上按钮，因此无需隐藏任何东西）。然后我想在其下方的第二个导航栏中包含更多选项，并且需要在较小的屏幕上折叠 - 但是当它崩溃时我希望汉堡包图标出现在相同的导航栏级别（即较低的导航栏，而不是顶部的导航栏））。这是我到目前为止所得到的......

<nav class="navbar navbar-fixed-top navbar-inverse">

   <!--this div shows my existing hacky solution to fix a button in the middle of the top navbar without it collapsing (i.e. I just define it outside of the navbar!)-->
  <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%;"> 
            <button class="button"><span style="float: left;"id="selectedButtonSpan">Button Text</span></button>
        </div>
  </div>

<!--this covers BOTH NAVBARS - not sure if that's the correct way to do it-->
  <div class="container-fluid no-padding">

        <!--this is the hamburger that appears when the page collapses past a certain point but it appears on the top nav whereas I want it to appear on the bottom nav-->
        <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar" style = "line-height: 30px;">
              <span class="sr-only">Toggle navigation</span>
              <i class="fa fa-bars"></i>
            </button>
        </div>

        <!--top navbar - nothing should change here (i.e. I don't want it to ever collapse) but when I change the class from navbar-collapse to navbar-default, it won't even appear when the page loads-->
        <div id="navbar" class="collapse navbar-collapse">

             <div class="navbar-brand" id="logo"></div> 
             <div id="userAccountButton" class="userAccountButton"> 

        </div>

        <!--second navbar - this should collapse (which it does successfully) but the hamburger icon should appear on the same level -->
        <div id="navbar2" class="collapse navbar-collapse" style="background-color: #66CCFF;">  <!-- collapse navbar-collapse to collapse to nothing when page shrinks-->
                <ul class="nav navbar-nav">
                    <li>Option A</li>
                    <li class="divider-vertical"></li>
                    <li>Option B</li>
                    <li class="divider-vertical"></li>
                    <li>Option C</li>
                    <li class="divider-vertical"></li>
                    <li>Option D</li>
                    <li class="divider-vertical"></li>
                    <li>Option E</li>
                    <li class="divider-vertical"></li>
                </ul>
        </div>

    </div><!-- container-fluid no-padding -->
</nav><!-- navbar navbar-fixed-top navbar-inverse -->

在完整尺寸的屏幕上，一切看起来都很棒，但是当我将页面缩小到崩溃点后，第二个/底部导航栏就会崩溃（正确），但顶部导航栏有两个问题... < / p>

它包含的div消失（即徽标和帐户按钮）
汉堡包图标出现在此级别上（而它应显示在第二个/底部导航栏上）

我很确定我在这里缺少一些基本的东西，但我真的很感激为什么我正在使用的结构不起作用的任何想法 - 我知道我需要更改顶部导航栏的类，但是只有这一点才会让它消失所以我希望有人可以建议一个更好的方法来组织导航栏。谢谢你的任何想法！

Answer 1

根据您的描述，我相信这是您正在尝试构建的内容。它可以简单到将一个navbar放在另一个上并对定位进行一些调整。

请参阅工作示例代码段。

＆＃13;

.navbar.navbar-inverse {
  border-top: none;
}
.navbar-inverse.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-inverse .navbar-top > li {
  display: inline-block;
  font-size: 12px;
  line-height: 30px;
}
.navbar-inverse .navbar-top > li > a {
  color: #777;
}
.navbar .navbar-toggle {
  padding: 5px 10px;
  border-radius: 0;
  border: none;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="navbar-inverse navbar-static-top nav-top">
  <div class="container-fluid">
    <a class="navbar-brand-top" href="#">
      <img src="http://placehold.it/100x50/fff/222?text=LOGO">
    </a>

    <ul class="nav navbar-top">
      <li><a href="#">sign up</a>

      </li>
      <li><a href="#">login</a>

      </li>

    </ul>
  </div>
</div>
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>

        <i class="fa fa-bars"></i>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-lower">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Foo</a>

        </li>
        <li><a href="#">Bar</a>

        </li>
        <li><a href="#">Foo</a>

        </li>
        <li><a href="#">Bar</a>

        </li>
        <li><a href="#">Foo</a>

        </li>
        <li><a href="#">Bar</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

使用引导程序折叠2个导航栏中的较低者

1 个答案: