bootstrap 3中的匹配列高答案

【问题标题】：matching column height in bootstrap 3bootstrap 3中的匹配列高
【发布时间】：2014-05-24 10:08:33
【问题描述】：

开始使用 bootstrap 3，想看看我是否可以进行类似于 vox.com 的布局。这是我正在努力的图片（该网站上的页面布局发生了变化）

这是我所拥有的：

虚拟代码让我发帖：

 <div class="container">
          <div class="row">
        <div class="col-sm-6

显然，我添加了比必要更多的文本，但您可以在此处看到问题：

您可以在 vox 网站上将文本添加到标题中，并且它会保持对齐...如何在 bootstrap 3 中获得相同的效果？

更新

我可以将文本包装在一个类中，并通过 jquery 设置高度。我需要将溢出设置为隐藏。这可行，但我需要 jquery 仅在宽度设置为中型桌面或large size desktop 时才能工作。当屏幕设置为超小时，我不希望它工作。有没有办法通过 jquery 找出它处于什么模式？

【问题讨论】：

如果我错了，请纠正我：您希望“右列”，即带有这些框（图像+随机大小文本）的那个，具有左侧列的图像高度的最大高度?
José Cabo：我希望图像和文本像 vox.com 中一样均匀分布。所以 image.height * 2 + text.height * 2 = large_picture.height。我用一个 jquery 选项更新了答案，这给了我想要的东西。

【解决方案1】：

一种选择是将 Bootstrap 中断的点从水平更改为堆叠。我将你的从 sm 更改为 lg，这样可以更快地中断。

<div class="col-lg-6">

转到here 获取有关 Bootstrap 断点的说明。

我还认为，与其尝试破解 HTML/CSS，不如退后一步，考虑一下您的内容。 Vox.com 在图片下方只有一篇文章的标题，但看起来您想在图片下方放置整个预告片。也许你应该在图片下面少放一些文字。这也可能解决问题。

【讨论】：