在 bootstrap 导航栏上保持一里可见

Question

我在 bootstrap 中有一个标准的导航栏。当它折叠时，我只看到一个汉堡包菜单按钮，所有的 li 都折叠在下面。

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li><a href="/">Home</a></li>
                  <li><a href="/store">Store</a></li>
                  <li><a href="/blog">Blog</a></li>
                  <li><a href="/about">About</a></li>
              </ul>
          </div>
      </div>
  </nav>

当它折叠时（mobile/small 屏幕）我希望 "Store" link 在导航栏的顶部保持可见，在汉堡包菜单的左侧。我可以使用 bootstrap 的类执行此操作，还是需要通过 @media 手动执行此操作？

Answer 1

这里我得到了一个解决方案。尝试将按钮放在

之后

<div class="navbar-header">

及之前

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
 </button>

Here 是一个 JsFiddle。我基本上做了什么：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    
      <div class="navbar-header">
        <button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" aria-label="Left Align" href="/store">
          Store
        </button>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
              <li><a href="/">Home</a></li>
              <li><a href="/store">Store</a></li>
              <li><a href="/blog">Blog</a></li>
              <li><a href="/about">About</a></li>
          </ul>
      </div>
  </div>

希望我能帮到你，我的回答解决了你的问题。 :)

在 bootstrap 导航栏上保持一里可见

Keeping one li visible on bootstrap navbar

css

navbar

responsive-design

twitter-bootstrap

twitter-bootstrap-3