看起来很简单，但我无法让这些列很好地发挥作用。
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”屏幕 View 中，一列被撞到一个新行，具体取决于上述列的伴随文本的大小。无论上面元素的文本有多长，如何让这些列元素对齐？
这是一张简化了我想要做的事情的照片。有关我遇到的问题，请参阅 jsfiddle。元素 4 被推到 MD View 中的新行，由于上述元素的高度，元素 3 正在取而代之。
最佳答案
出现这个问题的原因是columns里面的内容高度不一样。 这是一篇解释它的文章:https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643
Bootstrap 高度问题的发生是因为列 (col--) 使用 float:left。当一列“ float ”时，它会脱离文档的正常流动。它向左或向右移动，直到它触及其包含框的边缘。因此，当列高不均匀时，正确的做法是将它们堆叠到最近的一侧。
我认为最简单的事情是让所有列具有相同的高度。在我看来，Flexbox 是最好的方法，因为无论容器中的内容如何，布局都是灵活的(Bootstrap 4 已经使用了 flexbox)。您还可以简单地为所有列设置一个固定的高度值(本文提供了几种方法来做到这一点)。本文还包含更多方法。
关于html - Bootstrap 列元素调整大小碰撞到新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51772660/