Twitter引導自定義主題爲1200px/980px

Question

我正在使用twitter bootstrap css框架。我已經爲桌面寬度設備（1200以上）創建了自定義導航，並且希望爲每個寬度佈局（980像素，平板電腦，手機）創建更多。雖然我已經設置了visible-desktop，當我調整瀏覽器從1200px到更小我的導航欄廢墟，但它仍然沒有隱藏。

<div id="navigation-div" class="span6 offset2"> 

    <div id="navigation-nophone" class="visible-desktop"> 
     <ul class="menu clearfix"> 
      <li class="active"><a href="">Home</a></li> 
      <li><a href="">News</a></li> 
      <li><a href="">Demoes</a></li> 
      <li><a href="">Features</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </div> 

    <div id="navigation-phone" class="visible-phone"> 
     <ul class="menu"> 
      <li class="active"><a href="">Home</a></li> 
      <li><a href="">News</a></li> 
      <li><a href="">Demoes</a></li> 
      <li><a href="">Features</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </div> 

</div> 

所以我認爲，當調整窗口大小小於1200像素的佈局寬度爲980px，但仍然引導認爲它是桌面。我不知道如何解決它。

我對980像素寬度佈局和1200像素寬度佈局定義新參數沒有問題，但無法找到如何從一個切換到另一個（可見桌面對於兩種情況都是如此）。

P.S.

手機的導航開關工作正常！

Answer 1

流體bootstap有980px桌面佈局了起來，併爲1200像素起來。他們都被認爲是桌面所以responsive utility classes像可見桌面將不會足夠靈活，你想做什麼。

查看響應式引導程序css文件中的@media請求，這可能是您想要去的方式。

如果你是新來此，這裏是它是如何工作來改變背景顏色不同的窗口寬度一個基本的例子：http://jsfiddle.net/panchroma/ZNSVr/

的CSS是足夠的邏輯，

/* regular desktop */ 
@media (min-width: 980px) { 
body{ 
background-color: green; 
} 

} 

/* wide desktop */ 
@media (min-width: 1200px) { 
body{ 
background-color: olive; 
} 

} 

注意順序不同的@media塊通常很重要。

@ tahdhaze09的建議被認爲是最佳實踐，使用@media請求可能足夠強大，足以讓您按照自己的意願進行操作，並且只使用一組導航鏈接。

祝你好運！

Answer 2

您應該對所有設備使用相同的導航，並允許CSS負責導航格式。

查看Bootstrap的默認樣本並檢查導航代碼。這些示例在擴展和縮小視口時效果很好。

http://twitter.github.com/bootstrap/examples/hero.html

Answer 3

嘗試把這個CSS在自定義的style.css文件

@media (min-width: 768px) and (max-width: 1280px) { 
    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
    } 
    .navbar-header .collapse, .navbar-toggle { 
     display:block !important; 
    } 
    .navbar-header { 
     float:none; 
    } 
    .navbar-nav { 
     float: none !important; 
     margin: 0px; 
    } 
    .navbar-nav { 
     margin: 7.5px -15px; 
    } 
    .nav > li { 
     position: relative; 
     display: block; 
    } 
    .navbar-nav > li { 
     float: none !important; 
    } 
    .nav > li > a { 
     position: relative; 
     display: block; 
     padding: 10px 15px; 
    } 
    .navbar-collapse { 
     padding-right: 15px; 
     padding-left: 15px; 
     overflow-x: visible; 
     border-top: 1px solid transparent; 
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset; 
    } 
    .nav { 
     padding-left: 0px; 
     margin-bottom: 0px; 
     list-style: outside none none; 
    } 
}