縮小瀏覽器寬度時更改爲垂直菜單

我已經開始使用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

縮小瀏覽器寬度時更改爲垂直菜單

回答

相關問題