Html 每个项目中具有不同高度的 Bootstrap 3 网格 - 是否可以仅使用 CSS 来解决？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24590222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 grid with different height in each item - is it solvable using only CSS?
提问by haimlit
I'm trying to make a grid of thumbnails, where each thumbnail has an image and a label. It works fine if all the labels have the same length, because then all the thumbnails have the same height:
我正在尝试制作一个缩略图网格，其中每个缩略图都有一个图像和一个标签。如果所有标签的长度相同，它就可以正常工作，因为所有缩略图都具有相同的高度：
http://www.bootply.com/iSqwWyx5ms
http://www.bootply.com/iSqwWyx5ms
However, if I shorten the rightmost thumbnail's text, part of the row below gets pushed into a new row, as shown here:
但是，如果我缩短最右边缩略图的文本，下面一行的一部分将被推入新行，如下所示：
http://www.bootply.com/Wqd021aaeM
http://www.bootply.com/Wqd021aaeM
What I would like is the second row to start from the lowest point in which the first row ended.
我想要的是从第一行结束的最低点开始的第二行。
I know I can solve it with JavaScript - find the longest thumbnail in each row and set the other thumbnails to have that height. Question is, do I have any way of doing it, or something else that can solve my problem, using only with CSS?
我知道我可以用 JavaScript 解决它 - 找到每一行中最长的缩略图并将其他缩略图设置为具有该高度。问题是，我有没有办法做到这一点，或者其他可以解决我的问题的方法，只使用 CSS？
Update: I don't know beforehand how many items I have in one row. For example, on a small screen I'd have 2 items in a row, while on a bigger screen it'll be 3, so solutions which set when a new row starts aren't good for me.
更新：我事先不知道我在一行中有多少项目。例如，在小屏幕上，我会连续有 2 个项目，而在更大的屏幕上，它将是 3 个，因此在新行开始时设置的解决方案对我不利。
采纳答案by gbellmann
You should use .clearfix, as described at the Grid responsive resets section of the Bootstrap documentation: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets
您应该使用.clearfix，如 Bootstrap 文档的网格响应重置部分所述：https: //getbootstrap.com/docs/3.3/css/#grid-responsive-resets
回答by Lucas Bustamante
If you don't know how many columns you have, you can do:
如果你不知道你有多少列，你可以这样做：
.row.fix {
display: flex;
flex-wrap: wrap;
width:100%; /*not always necessary*/
}
Working fiddle:https://jsfiddle.net/wqdm1jjt/
工作小提琴：https : //jsfiddle.net/wqdm1jjt/
Example:
例子：
Author: Juan Miguel
作者：胡安·米格尔
回答by Francesco Bancalari
I think it's better to use some few row of js. With CSS you could only have a new "row" using clearfixclass (as answered before), but each div will have different height.
If you wish to set the same height to each dynamicdiv, I think you could do it only by js.
我认为最好使用一些js. 使用 CSS，您只能使用clearfixclass拥有一个新的“行” （如前所述），但每个 div 将具有不同的高度。如果你想为每个动态div设置相同的高度，我认为你只能通过 js 来完成。
$(document).ready(function() {
var maxHeight = 0;
$(".equalize").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".equalize").height(maxHeight);
});
Here is a working demobased on your code.
这是基于您的代码的工作演示。
All what you have to do is giving the same class to each main divinside the col--, and than run a each()function in js that give to them the same height (the max-one).
您所要做的就是为divcol- - 中的每个 main 提供相同的类，然后each()在 js 中运行一个函数，为它们提供相同的高度（最大一）。
Your HTML structure should looks like that:
您的 HTML 结构应如下所示：
<div class="container">
<div class="col-md-4">
<div class="thumbnail equalize">
<!-- your HTML content -->
</div> <!-- /.thumbnail equalize -->
</div> <!-- /.col-md-4 -->
</div> <!-- /.container -->
回答by jme11
You can use the same trick I described in this answer.
您可以使用我在此答案中描述的相同技巧。
In your case, you'd change the media queries to look like this:
在您的情况下，您将媒体查询更改为如下所示：
@media (min-width: 768px) and (max-width: 991px) {
.portfolio>.clear:nth-child(4n+4)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 992px) {
.portfolio>.clear:nth-child(6n+6)::before {
content: '';
display: table;
clear: both;
}
}
768px - 991px is the sm size, you have col-sm-2, so you want every 4th div to clear. 992px and above relates to the md size, where you have col-md-3, so you want every 6th div to clear at that size. It's way easier than using the responsive resets, although it's based on the exact same premise.
768px - 991px 是 sm 大小，你有 col-sm-2，所以你希望每 4 个 div 都清除。992px 及以上与 md 大小有关，其中有 col-md-3，因此您希望每 6 个 div 以该大小清除。尽管它基于完全相同的前提，但它比使用响应式重置要容易得多。
P.S. I added a div with the row class inside your container (because you need one inside a container otherwise you will have double padding on the outside) and I also gave it a class of portfolio for easy targeting. Here's your updated Bootply.
PS 我在容器内添加了一个带有 row 类的 div（因为您需要在容器内使用一个 div，否则外部会有双填充），并且我还给了它一类便于定位的投资组合。这是您更新的Bootply。
回答by Glogo
you could use clear: leftand apply it for each first child in row. For example if you have 4 items in row you can use:
您可以clear: left为行中的每个第一个孩子使用和应用它。例如，如果您连续有 4 个项目，则可以使用：
.my-row>:nth-child(3n+1) {
clear:left;
background-color: red; // just to see if the first item in row is matched
}
回答by Zim
You can also do a CSS only clearfix like this. Simply add auto-clearto the row.
你也可以像这样做一个 CSS only clearfix 。只需添加auto-clear到row.
@media (min-width:1200px){
.auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
.auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
.auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
.auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
.auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
.auto-clear .col-md-1:nth-child(12n+1){clear:left;}
.auto-clear .col-md-2:nth-child(6n+1){clear:left;}
.auto-clear .col-md-3:nth-child(4n+1){clear:left;}
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
.auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
.auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
.auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
.auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
.auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
.auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
.auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
.auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
.auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
.auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
.auto-clear .col-xs-6:nth-child(odd){clear:left;}
}
回答by ffflabs
If you know how many thumbnails wide is your arrangement, then you can use <div class="row"></div>to wrap thumbnails in groups of three (or N).
如果您知道您的排列有多少个缩略图，那么您可以使用<div class="row"></div>将缩略图包装成三个（或 N 个）的组。
Otherwise, the workaround would be to set a fixed height for the thumbnail element. On your example
否则，解决方法是为缩略图元素设置固定高度。在你的例子中
.thumbnail {
height:420px;
}
However, if your thumbnail height and text can vary a lot, then it will either look awkward or hide part of the img/label.
但是，如果您的缩略图高度和文本可能变化很大，那么它要么看起来很尴尬，要么隐藏了 img/label 的一部分。
回答by Khushal Dave
Why dont you use the <div class="row"></div>Have a look at this http://www.bootply.com/6bIZkSGcA1
你为什么不使用<div class="row"></div>看看这个http://www.bootply.com/6bIZkSGcA1
Is this what you wanted.??
这就是你想要的吗？？
P.S. This will directly limit the boundaries to a row.
PS 这将直接将边界限制为一行。
