Question

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

@media

当它崩溃时（移动/小屏幕）我希望“商店”链接在汉堡菜单左侧导航栏的顶部保持可见状态。我可以使用bootstrap的类来执行此操作，还是需要通过rbi.org.in手动执行此操作？

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导航栏上保持一个li可见

1 个答案: