引导网格垂直对齐答案

【问题标题】：Bootstrap grid vertical align引导网格垂直对齐
【发布时间】：2016-02-28 22:44:58
【问题描述】：

所以我有一个从数据库中获取的游戏网格。我希望每一行元素都垂直对齐，而且大多数都是。但是由于元素的高度不同，其中一些元素会自行结束。有谁知道如何解决这个问题？

对于数据库中的每款游戏，我都会附上这段代码：

<div class="col-xs-4 col-height thumb">
    <a class="thumbnail">
        <img class="img-responsive" src="'.$imgPath.'" alt="hello" style="width:135px;height:200px">
        <span>'.$gameArr[$i][5].'</span>
        <br/>
        <strong>Genre: </strong><span>'.$gameArr[$i][3].'</span>
        <br/>
        <strong>Publisher: </strong><span>'.$gameArr[$i][2].'</span>
        <br/>
        <strong>Platform: </strong><span>'.$gameArr[$i][1].'</span>
        <br/>
        <strong>PEGI Rating: </strong><span>'.$gameArr[$i][4].'+</span>
        <br/>
        <strong>Price: </strong><span>£'.$gameArr[$i][6].'</span>
    </a>
</div>

Example of what I want

Example of problem

P.S 如果我不是很清楚，请原谅我，这是我的第一篇文章。我意识到我要解释的东西并不容易解释

【问题讨论】：

请写下你已有的代码
我认为如果你使用 css 清除浮动随机项应该落到下一个“行”
@sudomakeinstall2 完成了。我一发布就意识到我没有包含代码
@TheGeekYouNeed 我试过左右都清楚。 left 和 both clear 会导致每个游戏都在自己的行中，而 right align 不会改变原始问题。
如果你的数据模型记住了一个表，使用 ...这不是罪。

标签： html css twitter-bootstrap

【解决方案1】：

答案来自：zessx

见ORIGINAL POST

这是由 2 行或更多文本的技能造成的。这是使用float 属性时的一个众所周知的错误。这里有一张小图可以理解：

[Bootply] The issue

选项#1：强制高度

您的第一个选择是强制元素具有相同的高度：

.tutor {
    height: 500px;
}

[专业版] 简单易用，无处不在
[骗局] 使用幻数
[Con]限制技能行数
[Con] 修改版本上的无用空格

[Bootply] Force height

选项 #2：使用 clearfix

您的第二个选项是使用 clearfix，并强制第 5 个元素位于新行上（第 9 个、第 13 个相同......）：

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}

[专业]技能不限制行数
[Pro] 没有无用的空格
[专业] 没有幻数
[Con] 每个尺寸有一条 CSS 规则 (xs/sm/md/lg)
[Con] 规则取决于您的网格 (.col-xx-3)

[Bootply] Clearfix

【讨论】：