0

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

2 回答 2

1

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

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

于 2012-12-14T13:25:09.447 回答
1

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

只需在不添加任何 css 或 javascript 的情况下移动您的 html 即可。:) 这是一个 jsfiddle：http: //jsfiddle.net/hajpoj/Z3wqL/3/

于 2012-12-15T05:30:45.683 回答