0

私は Twitter Bootstrap の使用を開始し、モバイルで表示した場合 (またはブラウザー ウィンドウの幅を縮小した場合) に折りたたみ式メニューに変更するレスポンシブ ナビゲーションを実装しました。

これが今の様子です：

私が望むのは、現在のように水平ではなく、メニュー項目をログインフォームの左側に並べて表示することです。Twitter Bootstrap でこれを行う簡単な方法はありますか?

これが私のnavコードです:(元のcssは変更していません):

    <div class='navbar'>
      <div class='navbar-inner'>
        <div class='container-fluid'>
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class='brand'>Test</a>
        <ul class='nav nav-collapse collapse'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
        </ul>
        <ul class='nav nav-collapse collapse pull-right'>
            <li class=""><form class="navbar-search">
            <input type="text" class="span2" placeholder="Login">
            <input type="text" class="span2" placeholder="Password">
            <input type="submit" value="Login" class="btn"/>
        </form></li>
        </ul>
      </div>
    </div>
  </div>
4

2 に答える 2

1

ツイッターのブートストラップドキュメントによると、非表示にして正しくフォーマットしたいものはすべて、中に入れる必要があります<div class="nav-collapse collapse">{your nav items}</div>

<div class='navbar'>
  <div class='navbar-inner'>
    <div class='container-fluid'>
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    <a class='brand'>Test</a>


    <!-- ALL MY NAVIGATION IN HERE -->
    <div class='nav-collapse collapse'>
        <ul class='nav'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
        </ul>            
        <form class="navbar-search pull-right">
            <input type="text" class="span2" placeholder="Login">
            <input type="text" class="span2" placeholder="Password">
            <input type="submit" value="Login" class="btn"/>
        </form>
    </div>
  </div>
</div>
</div>

cssやjavascriptを追加せずにHTMLを移動するだけで、うまくいきます。:)これがjsfiddleです：http：//jsfiddle.net/hajpoj/Z3wqL/3/

于 2012-12-15T05:30:45.683 に答える