如何使 Bootstrap 4 列的高度都相同? [复制]
Posted
技术标签:
【中文标题】如何使 Bootstrap 4 列的高度都相同? [复制]【英文标题】:How can I make Bootstrap 4 columns all the same height? [duplicate] 【发布时间】:2017-07-21 22:12:05 【问题描述】:免责声明。这个问题之前被问过many 次。但随着时间的流逝,现在我们即将发布完全支持 flexbox 的 Bootstrap 4,是时候为同一个问题寻找新答案了。
我想用 Bootstrap 4 创建相等的列高。这是预期结果的演示:
我想要一个适用于所有浏览器的解决方案,它受 Bootstrap 4 支持。如果不涉及 JS,那就更好了。一些现有的解决方案是基于 Bootstrap 3 的,一些不适用于 MacOS 上的 Safari。
更新。似乎我做错了研究。默认情况下,Bootstrap 4 具有相同的高度。我已经包含了一个带有插图的更新图像。你不需要做任何事情,它已经在那里了。
【问题讨论】:
@AndrewLyndem 我找不到任何基于 B4 的解决方案。我找到了一些基于B3的。由于这个问题很受欢迎,我认为更有经验的人已经有了一个很好的测试解决方案。 这适用于 B3,例如 codepen.io/bootstrapped/details/RrabNe dup 问题已经有了 Bootstrap 4 的答案。 @ZimSystem 它在 Safari 中不起作用。但也许因为它是 Safari 中的一个错误,我们可以忘记这一点。 是的,答案仍然是和dup中的一样。 Flexbox 是 Bootstrap 4 原生的,因此等高可以原生地工作。 【参考方案1】:您可以使用新的引导卡:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." >
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." >
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." >
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
链接:Click here
问候,
【讨论】:
【参考方案2】:您只需将class="row-eq-height"
与您的class="row"
一起使用,即可为以前的引导程序版本获得等高的列。
但在 bootstrap 4 中,这是本机自带的。
check this link --http://getbootstrap.com.vn/examples/equal-height-columns/
【讨论】:
我在 B4 alpha 中看不到“row-eq-height”类,是吗?如果没有,您有任何工作示例吗?您的链接基于 B3,而不是 B4。 不,我提到等高列是 b4 的原生属性。链接是 b3 的 此外,row-eq-height
类从未在 Bootstrap 3 中发布。row-eq-height
是 3rd party Vietnamese fork of Bootstrap 和 was temporarily an experiment 的一部分,但未包含在 BS 3 中。
这是正确答案(h-100 类):***.com/questions/49437032/…【参考方案3】:
等高列是 Bootstrap 4 网格的默认行为。
.col background: red;
.col:nth-child(odd) background: yellow;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
<br>
Line 2
<br>
Line 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
【讨论】:
您是否有解决方案可以在列之间创建默认 (30px) 间隙并且仍然具有相同高度的列? @max 排水沟在默认情况下仍然存在......以上是关于如何使 Bootstrap 4 列的高度都相同? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何使 2 列 Bootstrap 网格中的第 2 列与第 1 列的高度相同