Bootstrap，對佈局做出響應式更改

Question

我爲我的設計使用流體Twitter Bootstrap佈局，並且即將使其響應。考慮一個網格像這樣：

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span8"></div>  
</div> 

什麼是隱藏span4，讓span8佔據整個寬度，當屏幕變小所使用的最佳方法？

Answer 1

使用與任何最小/最大寬度媒體查詢設置.span4到display: none;

然後，添加.span8的規則.span12一切以下任何寬度你隱藏.span4，因爲所有的工作是爲你的引導已經完成，所以不需要重複。它會是這個樣子：

@media (min-width: 320px){ 
    .span12, 
    .span8 { 
     width: 300px; 
    } 
} 

（代碼最後一點僅僅是一個例子，但會有類似的東西在白手起家腳手架）

希望幫助:)

編輯：

這可以工作，我測試它使用引導站點上的開發工具，它似乎工作。再次，在媒體查詢：

@media (min-width: 320px){ 

    #special .span4 { 
     display: none; 
    } 

    #special .span8 { 
     float: none; 
     width: auto; 
    } 

} 

Answer 2

自舉2.0.2及以上，您可以：

更改HTML到：

<div class="row-fluid"> 
    <div class="span4 hidden-phone hidden-tablet"></div> 
    <div class="span8 span12-tablet"></div>  
</div> 

（我解釋 '小' 與平板電腦和手機尺寸，對其他尺寸使用您自己的定義）

。隱藏手機和隱藏平板隱藏小屏幕的span4。如果你碰巧使用少，你可以使用自舉的網格混入

@media (max-width: 979px) { 
    .span12-tablet { 
    width: 91.48936170212765% !important; 
    *width: 91.43617021276594% !important; 
    } 
} 

：

.span12-tablet { 
    @media (max-width: 979px) { 
     #grid > .fluid > .span(12) !important; 
    } 
} 

Answer 3

收回該空間並重新跨度span8，添加到您的CSS如果使用引導程序2.2.1，您可以：

將html更改爲：

<div class="row-fluid"> 
    <div class="span4 hidden-phone hidden-tablet"></div> 
    <div class="span8"></div>  
</div> 

現在它添加到你的CSS覆蓋：

@media (min-width: 768px) and (max-width: 979px) 
{ 
    [class*="span"], 
    .row-fluid [class*="span"] { 
     display: block; 
     float: none; 
     width: 100%; 
     margin-left: 0; 
    } 
} 

這也將爲您已在HTML中指定的任何其他跨寬工作。

這些變化的影響使所有跨度寬度100％，導致iPad在縱向模式下始終使用1列流體模式。

Answer 4

我想出了一個小的變化。

添加stack-tablet類的row-fluid，使跨堆疊在平板電腦的寬度，不僅在手機的寬度（引導默認）：

@media (max-width: 979px) { 
    .row-fluid.stack-tablet [class*="span"] { 
     width: 100%; 
     display: block; 
     float: none; 
     margin-left: 0; 
    } 
} 

可以同顯示和hidden-類使用。

Answer 5

這將是保持其動態的最佳選擇。在我的例子，我有寬度爲6列旁邊fluidGridColumnWidth

[class*="span"] { 
    width: 100%; 

    .row-fluid { 
     [class*="span"] { 
      width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5/@gridRowWidth * 100 * 1%); 

      float: left; 
      margin-left: @fluidGridGutterWidth; 

      &:first-child { 
       margin-left: 0; 
      } 
     } 
    } 
} 

Answer 6

寫這樣的電話設備這

這個div將隱藏<div class="span4 hidden-phone"></div>

和這個div會顯示<div class="span8 visible-phone"></div>

更新

上一個答案Bootstrap 2.3

現在引導3進來市場..

，所以我更新我的新用戶回答→bootstrap3

在電話設備這個div將隱藏<div class="col-md-4 hidden-xs"></div>

和這個div會顯示<div class="col-xs-4 visible-xs"></div>

Answer 7

只是：

<div class="row-fluid"> 
    <div class="span4 hidden-desktop"></div> 
    <div class="span8"></div>  
</div> 

Answer 8

TLDR：使用第二個代碼片段

Bootstrap是一個移動的第一個框架，所以我會從最小的屏幕尺寸向上解釋。無論斷點/屏幕大小如何，佈局始終爲12列。

從最小的斷點處開始（XS - 特小）時，span4是隱藏和span8通吃寬度（全部12列）

<div class="row-fluid"> 
    <div class="span4 hidden-xs"></div> 
    <div class="span8 col-xs-12"></div>  
</div> 

我們尚未大功告成，因爲我們避風港」當下一個斷點被命中時（sm /小/屏幕寬度超過767px），所以我們將使span4佔用寬度的三分之一（12列/ 3 = 4列），並且span8將採取其餘的的寬度（12-4 = 8列）

<div class="row-fluid"> 
    <div class="span4 hidden-xs col-sm-4"></div> 
    <div class="span8 col-xs-12 col-sm-8"></div>  
</div> 

上面假定您希望更改發生在xs-sm斷點之間的變化上。

延伸閱讀：

如果你想SM-MD（MD =中等）之間的變化，然後我可能會使用visible-md類將顯示在斷點中等及以上的span4（> 992px）

<div class="row-fluid"> 
    <div class="span4 visible-md col-md-4"></div> 
    <div class="span8 col-xs-12 col-md-8"></div>  
</div>