Question

我正在使用Bootstrap 3.3.2来创建两列。每列都有一个标题，一个带有未知长度文本的边界div和一个图像。我需要带有文本的带边框的div具有相同的高度，但只有当列并排时才需要。如果窗口足够窄以使列堆叠，则它们的高度不应相同。我怎样才能做到这一点？

我意识到我可以使用JavaScript将最短div的高度设置为与最高div的高度相同，但这种方法的问题是当用户减小浏览器窗口的宽度时，文本会溢出格。

这是我的代码（jsFiddle demo）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .equal {
                border: 3px solid #333;
                padding: 8px;
            }

            img {
                display: block;
                margin: 20px auto 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>Foo</h1>

                    <div class="equal">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
                    </div>

                    <img src="http://placehold.it/350x150" alt>
                </div>
                <div class="col-md-6">
                    <h1>Bar</h1>

                    <div class="equal">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
                    </div>

                    <img src="http://placehold.it/350x150" alt>
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

我知道这与this question类似，但我认为它实际上是不同的。

Answer 1

var equal1 = $(".equal1").height();

var equal2 = $(".equal2").height();

if(equal1 < equal2 ){
    $(".equal1").height($(".equal2").height());
} else {
    $(".equal2").height($(".equal1").height());
}

Please, see this

Demo result

或

Demo with code.

Answer 2

只需使用纯CSS，您就可以使用flex解决问题。

您可以在行类中添加另一个类，然后在该类上应用样式。

<div class="container">
        <div class="row row-eq-height">
            <div class="col-xs-6">
            ...

在css中添加：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;         /*to enable responsiveness*/
}

.row-eq-height > [class*="col-"] {
  display: flex;
  flex-direction: column;

  border: 1px solid green;
}

您可以查看演示here。

Answer 3

更新了！

Try DEMO

使用JavaScript

$(".equal2").height($(".equal1").height());

请阅读http://www.ejeliot.com/blog/61

具有相等高度子段的Bootstrap 3列

3 个答案: