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

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

这是它的外观现在：

我想是不是horisontal登录表单的相互左下被列在菜单项，因为它是现在。使用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>

来源

2012-12-14 holyredbeard

f马德尔需要回答！ –

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

你可以让这些变化响应resize事件，使用jQuery的css方法

来源

2012-12-14 13:25:09 Matanya

每要隐藏的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/

来源

2012-12-15 05:30:45 hajpoj

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

回答

相关问题