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

據我所知，您希望默認情況下可以看到所有菜單項，而無需用戶點擊三線（漢堡包）菜單，所有菜單項應在較小的屏幕上水平堆疊。

你上面的代碼很好。 只需在navbar-collapse div和所有集合中添加一個"in"類。

<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/