引導3格：充溢列行爲

我目前使用此佈局：引導3格：充溢列行爲

<div class="row"> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <!-- and on and on --> 
</div>

在每列的內容是大小可變的，這將導致在瀏覽器中一個奇怪的流動。像this。

正如你所看到的，列4,5,6是在一個新的「行」。第7列和第8列跳過了整列。這些行爲是不可取的，而我希望列像so一樣流動。

在這種情況下，每列都擁抱它所在的列。我還沒有找到解決這個問題的方法。我已查看clearfix。它似乎沒有幫助的情況，因爲它只是將列移動到換行/行。

來源

2017-05-31 Roderik Rasterhoff

[你應該閱讀關於BS網格系統的文檔]（https://getbootstrap.com/examples/grid/）。基本上每行應該總共有12列寬。你只是通過4的值添加單元格，所以在你的代碼中，你有4×8，這是32個單元格，並在你的頁面溢出。 – crazymatt

是的，我知道這是不正確的行中有超過12列，但對於所需的情況添加行將沒有幫助。 –

您正在尋找的東西通常被視爲Pinterest風格的網格。

HTML

<div class="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
</div>

CSS

* { 
    box-sizing: border-box; 
    font-size: 22px; 
    font-family: "Helvetica", sans-serif; 
    color: #333333; 
} 

.container { 
    background-color: #f2f2f2; 
    padding: 10px; 
    border: 2px solid #CCCCCC; 
    max-width: 900px; 
    margin: 0 auto; 
    height: 470px; 
    display: flex; 
    flex-flow: column wrap; /* Shorthand – you could use ‘flex-direction: column’ and ‘flex-wrap: wrap’ instead */ 
    justify-content: flex-start; 
    align-items: flex-start; 
} 

.item { 
    background-color: orange; 
    height: 150px; 
    width: 31%; 
    margin: 1%; 
    padding: 10px; 
} 

.item:nth-child(2) { 
    background-color: pink; 
    height: 250px; 
} 

.item:nth-child(3) { 
    height: 190px; 
} 

.item:nth-child(4) { 
    background-color: aqua; 
    height: 220px; 
}

演示：https://codepen.io/michellebarker/pen/zvxpoG

或者這種替代：https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid。或者search for more examples

來源

2017-05-31 16:50:38 Akif

正是我需要的，完全忘了pinterest也使用了這種佈局。 –

引導3格：充溢列行爲

回答

相關問題