引导列元素调整大小碰撞到新行答案

【问题标题】：Bootstrap column element resizing bumping to new line引导列元素调整大小碰撞到新行
【发布时间】：2019-01-17 06:02:54
【问题描述】：

看起来很简单，但我无法让这些列很好玩。

https://jsfiddle.net/talgia/xgjt15p3/5/

<html>
<head>
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
<body>

<div class="container-fluid bottompad">
    <div class="row">
        <h2 class="moduleHeading">
            Phasellus ut blandit eros</h2>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo1" class="img-responsive" src="/sites/default/files/Career_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Sed interdum</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum. Praesent egestas nibh at turpis tempor ultrices. </p>
                <div>
                    <a class="btn-primary" href="/node/63">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo2" class="img-responsive" src="/sites/default/files/Hope_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Ut lobortis elementum</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/62">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo3" class="img-responsive" src="/sites/default/files/guardian_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Ut blandit eros</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/124">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo4" class="img-responsive" src="/sites/default/files/rebound_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Elementum tortor</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/123">Learn more</a></div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

在“md”屏幕视图中，根据上述列的随附文本的大小，一列被撞到新行上。不管上面元素的文本有多长，如何让这些列元素对齐？

这是一张简化了我想要做的事情的照片。有关我遇到的问题，请参阅 jsfiddle。元素 4 被推到 MD 视图中的新行，并且元素 3 由于上述元素的高度而取而代之。

【问题讨论】：

标签： html css twitter-bootstrap twitter frontend

【解决方案1】：

造成这个问题的原因是列内的内容高度不一样。这是一篇解释它的文章：https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643

出现 Bootstrap 高度问题是因为列 (col--) 使用 float:left。当一列“浮动”时，它会脱离文档的正常流程。它向左或向右移动，直到触及其包含框的边缘。因此，当柱高不均匀时，正确的做法是将它们堆叠到最近的一侧。

我认为最简单的方法是让所有列的高度相同。在我看来，Flexbox 是做到这一点的最佳方式，因为无论容器内的内容如何，布局都是灵活的（Bootstrap 4 已经使用了 flexbox）。您也可以简单地为所有列设置一个固定的高度值（本文提供了几种方法来做到这一点）。本文还包含更多方法。

【讨论】：

感谢您的参考，这篇文章帮助很大。

【解决方案2】：

感谢上面的回答，我用了几行CSS

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

并将“display-flex”类添加到我的行中，以强制所有列中的高度相同，以便于对齐。你可以在这个 jsfiddle 链接上看到它的实际效果。 https://jsfiddle.net/talgia/xgjt15p3/38/

感谢伊尔莎·加西亚！

【讨论】：