自動定位超過12列在正確引導

我有一個顯示產品上的引導網格代碼。每個產品使用網格的4列，因此每行顯示3列。但是，由於它們的高度不同，它們不能正確顯示。自動定位超過12列在正確引導

實際結果：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"><div class="well">Random height #1</div></div> 
    <div class="col-md-4"><div class="well">Random height #2 <br><br><br><br><br><br></div></div> 
    <div class="col-md-4"><div class="well">Random height #3 <br><br><br><br><br></div></div> 
    <div class="col-md-4"><div class="well">Random height #4 <br></div></div> 
    <div class="col-md-4"><div class="well">Random height #5 <br><br><br><br></div></div> 
    <div class="col-md-4"><div class="well">Random height #6 <br><br><br></div></div> 
    </div> 
</div>

https://jsfiddle.net/a3w0hjx9/

預期結果（使用模擬更多的行）：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"><div class="well">Random height #1</div></div> 
    <div class="col-md-4"><div class="well">Random height #2 <br><br><br><br><br><br></div></div> 
    <div class="col-md-4"><div class="well">Random height #3 <br><br><br><br><br></div></div> 
</div> 
<div class="row"> 
    <div class="col-md-4"><div class="well">Random height #4 <br></div></div> 
    <div class="col-md-4"><div class="well">Random height #5 <br><br><br><br></div></div> 
    <div class="col-md-4"><div class="well">Random height #6 <br><br><br></div></div> 
    </div> 
</div>

https://jsfiddle.net/85oewy3f/

我怎樣才能實現，而無需添加一行，每3種產品所期望的結果？（我不能因爲網站的某些功能）

來源

2016-02-27 Ivan

設置每個col-md-4的最小高度。 –

[小提琴]（https://jsfiddle.net/frayne_konok/85oewy3f/1/） –

當然，最小高度的工作，但現在你在，只是不應該有限制的元素指定高度限制。

一個簡單的解決方案是利用:nth-child並清除。

.col-md-4:nth-child(3n+4) { 
    clear: left; 
}

Codepen：codepen.io/hellojason/pen/QNWMOZ

然後你就可以清除不同:nth-child位置周圍的媒體查詢，如果你需要得到更精細。

來源

2016-02-27 17:11:06 hellojason

weldone，@hellojason。繼續。 –

您可以通過設置每個.col-md-4的高度一定的價值做到這一點。細節是在fiddle

CSS：

.col-md-4{ 
    min-height: 200px 
}

可能這將是不好的項目，所以您可以通過添加其他類覆蓋。

來源

2016-02-27 17:07:07

這樣做的問題是，我將具有取決於如果用戶登錄或不設置不同的類時，用戶類型等，所以我希望能有更好的解決方案 – Ivan

這也是問題，okey讓我們嘗試不同的。看到另一個答案。 –

你需要每個第三列格後清除浮動。

.col-md-4:nth-child(3n+4) { 
    clear: both; 
}

...但真的是你應該使用自舉行的，他們的目的。

JSFiddle demo

來源

2016-02-27 17:10:02

自動定位超過12列在正確引導

回答

相關問題