Twitterのブーストラブ崩壊：複数の項目が1行にある？

Question

ブートストラップのナビゲーションバーの応答機能は素晴らしいですが、それは、例えば、個々のアイテムを取って、折りたたまれ、メニューに独自の行に置くことについて本当に積極的である：

  <div class="nav-collapse"> 
     <ul class="nav pull-left"> 
      <li><a id="mpd_header_playlist" href="/">Now Playing</a></li> 
      <li><a id="mpd_header_playlists" href="/playlists">Playlists</a></li> 
     </ul> 
     <ul class="nav pull-right"> 
      <li><a href="#">Volume:</a></li> 
      <li><a style="width:100px; valign:middle;"><div id="mpd_header_volume"></div></a></li> 
      <li><a href="#"><i class="icon-step-backward icon-white mpd_previous_button"></i></a></li> 
      <li><a href="#"><i class="icon-play icon-white mpd_play_button"></i></a></li> 
      <li><a href="#"><i class="icon-pause icon-white mpd_pause_button"></i></a></li> 
      <li><a href="#"><i class="icon-stop icon-white mpd_stop_button"></i></a></li> 
      <li><a href="#"><i class="icon-step-forward icon-white mpd_next_button"></i></a></li> 
      <li><a href="#">Search Music</a></li> 
      <li class=""> 
       <form class="navbar-search" id="search" action="search"> 
        <input type="text" name="q" class="search-query" placeholder="Search Library..." /> 
       </form> 
      </li> 
     </ul> 
     </div><!--/.nav-collapse --> 

は崩壊に行を生成すべての<li>のメニューが表示されます。実際には、ヘッダーとプレイリストのリンク行と、再生コントロールを構成するすべてのアイコンの行が必要です。アイテムを「グループ化」して、応答性の高いナビゲーションバーによってスマートに崩壊する方法はありますか？

Answer 1

最も簡単な方法は、リンクを同じli要素に入れることです。