如何在Bootstrap 3中使用語義標記創建多行？

我有我想用引導3.標記佈局八「簡單」面板中如何在Bootstrap 3中使用語義標記創建多行？

<div class="dashboard"> 
    <div class="dashboard-panel"> 
     <h1>Panel 1</h1> 
     <p>This is panel 1 (and a random piece of text)</p> 
    </div> 

    <div class="dashboard-panel"> 
     <h1>Panel 2</h1> 
     <p>This is panel 2 (and a random piece of text)</p> 
    </div> 

    // ...and so on - up to panel 8. 
</div>

我想在MD列大小的四兩兩行和四行的兩個SM列大小。

我使用這下面不甚規則：

.dashboard { 
    .make-row(); 
} 

.dashboard-panel { 
    .make-sm-column(6); 
    .make-md-column(3); 
}

然而，這造成的問題在於面板不總是形成四兩行。這取決於各個面板中有多少內容。如果其中一個面板較短，則使用其他面板創建第三行，直到短面板。

我認爲，當我用前四個面板填滿所有12個插槽時，接下來的四個插槽將乾淨地移動到第二排。

我在做什麼錯？我如何在保留語義標記的同時做到這一點？

來源

2013-12-12 dommer

您已打破標記。而且，語義是一個陷阱。 – Pavlo

這就是花車的工作原理。除非清除它，否則下一行不會移動到下一行。使用砌體。 – Christina

謝謝。爲什麼語義是一個「陷阱」？ – dommer

您所描述的問題記錄在這裏：http://getbootstrap.com/css/#grid-responsive-resets

網格響應，重置添加額外的div到你的HTML這將打破你的語義標記。

我從來沒有試圖追加（例如:after）grid-responsive-resets屬性條件。有條件的我的意思是每個第四個元素的MD網格。理論我想應該是可能的，我們應該問@ScottS也許:)

這樣的事情（不工作，例如）

.col-md-3:nth-child(4n+0):after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

另一種方法是讓所有的面板相同的高度，這如果您不知道動態內容的最大可能高度，則不起作用。如果你不知道最大高度，你可以用javascript/jQuery來解決這個問題。（請參閱：https://stackoverflow.com/a/19777087/1596547）

來源

2013-12-13 00:17:42

我能夠使用第n個孩子與媒體查詢，並把「明確：都;」在應該是新行上第一個的面板上。似乎在我的測試中工作。 – dommer

不錯，我不知道你的解決方案能否完全取代網格響應重置，在我看來這將是一個不錯的改進。 –

如何在Bootstrap 3中使用語義標記創建多行？

回答

相關問題