html - Bootstrap静态导航栏强制在小屏幕上展开

Question

鉴于来自 boostrap 模板的此菜单代码，我希望每个菜单项在检测到屏幕尺寸较小时都堆叠并占据整个宽度。本质上，与点击“三栏”菜单按钮时的功能相同，只是用户不必手动按下它。

提前致谢。

  <!-- Static navbar -->
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

Answer 1

我的理解是，您希望默认情况下所有菜单项都可见，而无需用户单击三行（汉堡）菜单，并且所有菜单项应水平堆叠在较小的屏幕上。

你上面的代码很好。只需将一个类添加"in"到navbar-collapsediv 和所有设置。

<div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse in">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>

这是演示：http: //jsfiddle.net/shekhardesigner/35gSz/