缩小浏览器宽度时更改为垂直菜单答案

【问题标题】：Changing to vertical menu when shrinking browser width缩小浏览器宽度时更改为垂直菜单
【发布时间】：2012-12-14 13:20:45
【问题描述】：

我已经开始使用 Twitter Bootstrap，并且已经实现了一个响应式导航，如果在移动设备上查看（或缩小浏览器窗口宽度），该导航会变为可折叠菜单。

现在是这样的：

我想要的是在登录表单左侧彼此下方列出的菜单项，而不是现在的水平。有没有使用 Twitter Bootstrap 的简单方法？

这是我的导航代码：（我没有更改原始 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>

【问题讨论】：

小提琴需要回答！

标签： css twitter-bootstrap navigation responsive-design nav

【解决方案1】：

由于LI 可能是浮动的或定义为inline-block，您需要将它们的CSS 规则分别更改为clear:both 或display:block。然后您需要将整个菜单浮动到左侧，将登录表单浮动到右侧。

您可以使用 JQuery 的 css 方法对 resize 事件做出响应

【讨论】：

【解决方案2】：

根据 twitter 引导文档，您想要隐藏和正确格式化的所有内容都需要放入 <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>

只是移动你的 html 而不添加任何 css 或 javascript 就可以了。:) 这是一个 jsfiddle：http://jsfiddle.net/hajpoj/Z3wqL/3/

【讨论】：