引导列元素调整大小碰撞到新行
Posted
技术标签:
【中文标题】引导列元素调整大小碰撞到新行【英文标题】：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 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 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 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 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 由于上述元素的高度而取而代之。
【问题讨论】：
【参考方案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/
感谢伊尔莎·加西亚！
【讨论】：
以上是关于引导列元素调整大小碰撞到新行的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法在引导 Div 元素中调整 p5js 画布的大小？