引导列大小答案

【问题标题】：Bootstrap Column size引导列大小
【发布时间】：2015-12-14 20:20:35
【问题描述】：

我正在尝试使用 bootstrap 让两个单独的列（不在同一行）具有相同的高度，这将是较大元素（图片）的高度。

代码：

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 col-sm-height">
                <img src="http://www.onlinegamblingbible.com/wp-content/uploads/2014/02/small-Android_logo.png"></img>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2 class="articleRecentTitre">My great title 1</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h3 class="articleRecentResume"> Excerpt here gregregfdsxgrezgttretgretregergfdqgregregregvcxgretgertrecdsgf'"t"'</h3>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 col-sm-height">
                 <img src="http://letrainde13h37.fr/wp-content/uploads/authors/jeremie-patonnier.jpg"></img>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2 class="articleRecentTitre">MY great title 2</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h3 class="articleRecentResume">description xaxaxaxaxaxaxaxaxacykaxaxaxafoobarxaxaoifherzoighbnfsoidgneorihgoierhgoihrsfoighvoierhgioreghoireh</h3>
            </div>
        </div>
    </div>
</div>

我基本上希望包含图片的每一列都是最大图片的大小，以便文本可以很好地对齐。

我不认为我可以使用不同的行/列布局（将两张图片放在同一行），因为如果调整视图大小/使用它会将它们放在正确的位置（连同文本）移动设备上的网站。

【问题讨论】：

你需要将你的图片限制在一个特定的高度，因为这两列中的图片将具有相同的高度，你可以给你的两个 div 指定一些高度。
是的，但是如果我对图像具有高度属性，它将停止响应，（因为我在我的 imgs 上使用了 img-responsive 类）对于 div 也是如此

标签： html css twitter-bootstrap

【解决方案1】：

这样的事情就可以解决问题。将此 JavaScript 添加到您的页面。

更新小提琴：http://jsfiddle.net/v30u5zjd/2/

$(document).ready(function () {
    var maxHeight = 0;
    $("img").each(function () {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $("img").height(maxHeight);
});

不过要小心 - 将图像缩放到大于其原始大小可能会导致一些颗粒状的图像。

更新——改为检查新的小提琴。添加了一些代码以允许图像保持响应。您需要将 img-responsive 类添加到您的图像中。

http://jsfiddle.net/v30u5zjd/3/

【讨论】：