在引导导航栏上保持一里可见答案

【问题标题】：Keeping one li visible on bootstrap navbar在引导导航栏上保持一里可见
【发布时间】：2017-08-13 15:37:00
【问题描述】：

我在引导程序中有一个标准导航栏。当它折叠时，我只看到一个汉堡菜单按钮，并且所有 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>

当它折叠时（移动/小屏幕），我希望“商店”链接保持在导航栏顶部的汉堡菜单左侧可见。我可以使用引导程序的类来执行此操作，还是需要通过@media 手动执行此操作？

【问题讨论】：

您可以使用引导程序中的现有类作为响应式实用程序，这里是它的链接getbootstrap.com/css/#responsive-utilities

标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design navbar

【解决方案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>

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

【讨论】：