5

ブーストラップ テンプレートからこのメニュー コードを指定すると、画面サイズが小さいことが検出されたときに、各メニュー項目がスタックされ、全幅を占めるようになります。基本的に、「トリプル バー」メニュー ボタンを押した場合と同じ機能ですが、ユーザーが手動で押す必要はありません。

前もって感謝します。

  <!-- 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>
4

1 に答える 1

7

私が理解しているのは、ユーザーが三本線 (ハンバーガー) メニューをクリックしなくてもデフォルトですべてのメニュー項目を表示できるようにし、すべてのメニュー項目を小さな画面で水平方向に積み重ねる必要があるということです。

上記のコードは問題ありません。"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/

于 2013-09-29T23:26:15.930 に答える