Twitter bootstrap nav-collapse:一行中有多个项目?

时间:2012-02-29 02:47:36

标签: html css less twitter-bootstrap

bootstrap导航栏的响应功能 awesome 但是它非常积极地采用每个单独的项目并将其放置在折叠菜单中的自己的行中,例如:

            <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>生成一行,实际上,我想要一个标题和播放列表链接的行,以及构成播放控件的所有图标的一行。有没有办法“分组”项目,以便它们被响应式导航栏巧妙地折叠?

1 个答案:

答案 0 :(得分:1)

最简单的方法是将链接放在同一个li元素中。