如何使用 twitter bootstrap 使彼此靠近的 div 具有相同的高度答案

【问题标题】：How to make divs near eachother to have the same height with twitter bootstrap如何使用 twitter bootstrap 使彼此靠近的 div 具有相同的高度
【发布时间】：2014-10-13 00:16:26
【问题描述】：

我有一个页面，其中包含可变数量的子 div，根据屏幕分辨率，它们连续出现 4 个（桌面）、连续 3 个（平板电脑）或连续 2 个（在智能手机上）。但它们的内容不同。我怎样才能使排成一行的 div 具有相同的高度？我有一个例子here

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
</div>

【问题讨论】：

也许你在问"responsive column resets"？其他解决方案是使用 jquery...
我接受了 jquery 解决方案 :D 但我真的不知道从哪里开始。获得最大高度并将其设置为所有列会让我有太多的空白。
我刚才回答了这个问题，这个链接可能会有所帮助stackoverflow.com/a/26268491/1663001
但我不希望他们都排成一行：|我最多有 20 个列。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

在这种情况下，请选择display:flex
或jquery grid layout plugins

【讨论】：

我认为最好的解决方案是 flexbox，没有 jQuery 只有纯 CSS3。一个带有 display: flex 和所有孩子身高 100% 的父 div。试一试。

【解决方案2】：

您应该手动设置 div 的高度。找出适合最大 div 的高度（可能以像素为单位），然后将它们全部设置为该大小。

【讨论】：

这给了我很多空白，因为从最大到最小甚至有 100 像素的差异。
这不是不可避免的吗？您有多行不同高度的 div。您希望他们如何排队？

【解决方案3】：

在行类上放置一个 Id，以便您可以将其用作选择器

<div class="row" id=selectorID>

然后尝试在子 div 上添加最小高度

#selectorID > div[class^='col-']{ min-height: 200px; }

【讨论】：