html - 如何垂直对齐 Bootstrap 列以使它们具有相同的高度？

Question

我正在尝试使用 Bootstrap 作为框架创建一个包含多个图像和内容的网站。

是否有可能以某种方式使所有列自动调整到行的高度？这是我的代码:

<div class="row">
    <div class="col-md-6 col-xs-12">
        <img src="images/main.jpg" class="img-responsive" alt="" />

        <div class="slogan">
            <h1>WEBSITE TITLE.<br />SLOGAN.</h1>
        </div>
    </div>

    <div class="col-md-3 col-xs-6">
        <div class="box content">
            <h3>Services and Pricing</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">READ MORE</a>
        </div>

        <img src="images/1.jpg" class="img-responsive" alt="" />
    </div>

    <div class="col-md-3 col-xs-6">
        <img src="images/2.jpg" class="img-responsive" alt="" />

        <div class="box content">
            <h3>Student Discount</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">LEARN MORE</a>
        </div>
    </div>
</div>

在上面的示例中，两个“col-md-3 col-xs-6”列的高度与“col-md-6 col-xs-12”列的高度不同。

如何让它们适应行的高度，以便所有内容都排成一行？

谢谢。

Answer 1

您可以使用 css flexbox为所有列实现相同的高度。所以你的代码将是:

<div class="row heightadjust">
    <div class="col-md-6 col-xs-12">
        <img src="images/main.jpg" class="img-responsive" alt="" />

        <div class="slogan">
            <h1>WEBSITE TITLE.<br />SLOGAN.</h1>
        </div>
    </div>

    <div class="col-md-3 col-xs-6">
        <div class="box content">
            <h3>Services and Pricing</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">READ MORE</a>
        </div>

        <img src="images/1.jpg" class="img-responsive" alt="" />
    </div>

    <div class="col-md-3 col-xs-6">
        <img src="images/2.jpg" class="img-responsive" alt="" />

        <div class="box content">
            <h3>Student Discount</h3>
            <br />
            <a href="#" title="" class="btn btn-custom">LEARN MORE</a>
        </div>
    </div>
</div>

并写一个自定义的CSS

.heightadjust {
    display: flex;
}