如何以不同的方式堆疊Bootstrap列？

我與引導一個菜鳥，雖然這是非常冷靜和有益的！我有個問題。如何以不同的方式堆疊Bootstrap列？

我試圖做一些按鈕，去這樣的寬屏幕上：

Button 1 Button 3 
Button 2 Button 4

但是，這在小屏幕上：

是否可以堆疊起來像？

來源

2014-01-17 i7nvd

試試這個..

<div class="container"> 
    <div class="col-xs-2"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <button type="button" class="btn btn-default">Button</button> 
      </div> 
      <div class="col-sm-6"> 
       <button type="button" class="btn btn-default">Button</button> 
      </div> 
      <div class="col-sm-6"> 
       <button type="button" class="btn btn-default">Button</button> 
      </div> 
      <div class="col-sm-6"> 
       <button type="button" class="btn btn-default">Button</button> 
      </div> 
     </div> 
    </div> 
</div>

http://bootply.com/106650

編輯..

要更改堆疊順序，你要嵌套的cols這樣的..

<div class="container"> 
    <div class="col-xs-3"> 
    <div class="col-md-6"> 
     <button type="button" class="btn btn-default">Button 1</button> 
     <button type="button" class="btn btn-default">Button 2</button> 
    </div> 
    <div class="col-md-6"> 
     <button type="button" class="btn btn-default">Button 3</button> 
     <button type="button" class="btn btn-default">Button 4</button> 
    </div> 
    </div> 
</div>

我更新了演示：http://bootply.com/106650

來源

2014-01-17 20:49:42 ZimSystem

感謝你 - 但是，這不是我所期待的。按鈕仍然是從一側到另一側。我想讓按鈕1堆疊在按鈕2的頂部，然後按鈕3在按鈕4的頂部。現在他們從右到左，然後從上到下;我試圖讓他們自上而下，然後從左到右。 – i7nvd

更新了我的答案 – ZimSystem

這是可以幫助你實現你想要做的事情的基礎。您可能需要根據您的特定屏幕尺寸進行一些調整。您也可以在http://getbootstrap.com/css/#grid-responsive-resets

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <button type="button" class="btn btn-default">Button</button> 
      <button type="button" class="btn btn-default">Button</button> 
      <button type="button" class="btn btn-default">Button</button> 
      <button type="button" class="btn btn-default">Button</button> 
     </div> 
    </div> 
</div>

UPDATE找到更多的細節

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <div class="col-md-6"> 
       <button type="button" class="btn btn-default">Button 1</button> 
       <button type="button" class="btn btn-default">Button 2</button> 
      </div> 
      <div class="col-md-6"> 
       <button type="button" class="btn btn-default">Button 3</button> 
       <button type="button" class="btn btn-default">Button 4</button> 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-01-17 20:41:11 cilerler

嗨 - 感謝這一點，但是，我已經已經有了類似的東西。問題是這樣的：按鈕1按鈕2 按鈕3按鈕4 按鈕並排放置在彼此旁邊時，而不是從上到下。 – i7nvd

如何以不同的方式堆疊Bootstrap列？

回答

相關問題