在手機上Twitter的引導菜單的造型

我使用Twitter的引導和我的菜單當前顯示的一樣： menu 這是完美的，但我需要的時候在移動查看有沒有菜單顯示，如： enter image description here 在手機上Twitter的引導菜單的造型

現在我知道我需要使用媒體查詢的，這不是問題，問題是如何在CSS中，我得到我的菜單樣式與線和這樣的...？

這裏是HTML：

<!--SUBMENU--> 
<div class="row-fluid"> 
    <div class="span12 submenu"> 
     <ul class="nav menu nav-pills"> 
      <li class="item-109"><a href="/stradix/index.php/company-profile" >Company Profile</a></li> 
      <li class="item-108"><a href="/stradix/index.php/due-diligence" >Due Diligence</a></li> 
      <li class="item-110"><a href="/stradix/index.php/our-solution" >Our Solution</a></li> 
      <li class="item-111"><a href="/stradix/index.php/loan-process" >Loan Process</a></li> 
      <li class="item-112"><a href="/stradix/index.php/currency-converter" >Currency Converter</a></li> 
      <li class="item-113"><a href="/stradix/index.php/loan-calculator" >Loan Calculator</a></li> 
      <li class="item-114"><a href="/stradix/index.php/news" >News</a></li> 
      <li class="item-115"><a href="/stradix/index.php/important-downloads" >Downloads</a></li> 
     </ul> 
    </div> 
</div> 
<!--SUBMENU-->

，並覆蓋默認引導的CSS：

.submenu .nav-pills > li > a { 
    font-size:1.25em; 
    padding:0; 
    margin:2em 0.9em 0 0; 
    padding: 0 0.9em 0 0; 
    color:#6D6E70; 
    border-right:1px solid #A7A9AB; 
    border-radius:0; 
} 
.submenu .nav-pills a:hover { 
    background:none; 
    color:#00ADEE; 
} 
.submenu .nav-pills > .active > a { 
    background:none; 
    color:#00ADEE; 
} 

.submenu .nav-pills > li:last-child > a { 
     border-right:none; 
     padding: 0; 
     margin-right:0; 
}

我會張貼在的jsfiddle但由於某些原因，我還自上週五以來無法連接到jsfiddle ..

任何幫助非常感謝..謝謝。

來源

2013-03-24 Dawid van der Hoven

你可以做這樣的事情，以達到預期的效果

@media (max-width: 480px) { 

.nav-pills > li { 
float: left; 
width: 50%; 
} 
}

退房my JSFiddle for an example

來源

2013-03-24 14:36:43 Shail

在手機上Twitter的引導菜單的造型

回答

相關問題