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可能已浮动或定义为inline-block，因此您需要将其CSS规则分别更改为clear:both或display:block。然后，您需要将整个菜单浮动到左侧，并将登录表单浮动到右侧。

您可以使用JQuery的resize方法

来响应css事件进行更改

Answer 2

根据twitter bootstrap文档，您想要隐藏和格式化的所有内容都需要放在<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/

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

2 个答案: