Question

看起来很简单，但我无法使这些列发挥出色。

<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被取代。

Answer 1

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

出现Bootstrap高度问题是因为列（col--）使用float：left。列“浮动”后，该列将从文档的正常流程中删除。它将向左或向右移动，直到接触其包含框的边缘。因此，当列高不均匀时，正确的做法是将它们堆叠到最近的一侧。

我认为最简单的事情是使所有列都具有相同的高度。我认为，Flexbox是执行此操作的最佳方法，因为无论容器中的内容是什么，布局都是灵活的（Bootstrap 4已经使用flexbox）。您还可以简单地为所有列设置一个固定的高度值（本文提供了几种方法）。本文还包含其他两种方法。

Answer 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/

感谢IlseGarcía！

Bootstrap列元素的大小调整到新行

2 个答案: