css - 缩小浏览器宽度时更改为垂直菜单

Question

我已经开始使用 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>

Answer 1

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

您可以使用 JQuery 的 css 方法响应 resize 事件做出这些更改