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

我已经开始使用Twitter引导，并且已经实现了一个响应性导航，如果在手机上查看，它会变成一个可折叠的菜单（或者缩小浏览器窗口的宽度）

这就是它现在的样子：

    <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>

我想要的是菜单项在登录表单的左侧列出，而不是现在的水平线。有没有一种简单的方法可以通过Twitter引导实现这一点

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

试验

项目1
项目2
项目2
项目2

由于

LI

可能是浮动的或定义为

内联块

，因此需要将其CSS规则更改为

清除：分别为
和
显示：块
。然后，您需要将整个菜单向左浮动，将登录表单向右浮动

您可以使用JQuery的
css
方法对
resize
事件做出相应的更改，根据twitter引导文档，您想要隐藏并正确格式化的所有内容都需要放入
{your nav items}


小提琴需要回答！