引导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格：充溢列行为

回答

相关问题