試圖讓Bootstrap列崩潰我想要的

我很努力地獲得我想要的引導佈局。這是我希望達到的。試圖讓Bootstrap列崩潰我想要的

它應該是什麼樣子的大屏幕上（我知道如何做到這一點）：

------------------------------------------------------- 
| Column 1 | Column 2 | Column 3 | Column 4 | 
-------------------------------------------------------

它應該是什麼樣子的中等屏幕（這是我在哪裏卡住）：

----------------------------------------- 
| Column 1 | Column 3 | Column 4 | 
| Column 2 |   |   | 
-----------------------------------------

它應該是什麼樣子的小屏幕（我知道如何做到這一點）：

--------------- 
| Column 1 | 
--------------- 
| Column 2 | 
--------------- 
| Column 3 | 
--------------- 
| Column 4 | 
---------------

任何建議????

來源

2015-11-02 Kevin

下面是解決方案：

<div class="row"> 
    <div class="col-md-4 col-sm-12 col-lg-6"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-lg-6">Column 1</div> 
      <div class="col-md-12 col-sm-12 col-lg-6">Column 2</div> 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-12 col-lg-3">Column 3</div> 
    <div class="col-md-4 col-sm-12 col-lg-3">Column 4</div> 
</div>

來源

2015-11-02 13:32:22

刪除我的答案，因爲這是一個最好的做法。 – Wizzard

謝謝！我確實看到了你的第一個答案，這讓我對它有了不同的思考，並且在我看到你的第二個答案之前，我能夠把它弄清楚。當實際解決方案更加簡單時，我正在推拉各處的柱子。 – Kevin

.grid { 
 
    background: #123; 
 
    color: white; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 col-md-4 col-lg-6"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-md-12 col-lg-6 grid">Column 1</div> 
 
     <div class="col-sm-12 col-md-12 col-lg-6 grid">Column 2</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12 col-md-4 col-lg-3 grid">Column 3</div> 
 
    <div class="col-sm-12 col-md-4 col-lg-3 grid">Column 4</div> 
 
    </div> 
 

 
</div>

來源

2015-11-02 13:44:40

試圖讓Bootstrap列崩潰我想要的

回答

相關問題