免责声明。此问题曾在many次提出过。但是由于时间已经过去,现在我们已经接近完全支持Flexbox的Bootstrap 4版本,现在是时候为同一个问题找到新答案了。
我想用Bootstrap 4创建相等的列高度。这是预期结果的演示:
我想要一个适用于Bootstrap 4支持的所有浏览器的解决方案。如果没有涉及JS,那就更好了。一些现有的解决方案基于Bootstrap 3,有些在MacOS上的Safari中无法正常工作。
更新。似乎我做错了研究。默认情况下,Bootstrap 4的高度相同。我已经包含了一个带有插图的更新图像。你不需要做任何事情,它已经存在。
答案 0 :(得分:24)
您必须使用class="row-eq-height"
和class="row"
来获得以前引导版本相同的高度列。
但是使用bootstrap 4本身就是这样。
check this link --http://getbootstrap.com.vn/examples/equal-height-columns/
答案 1 :(得分:10)
等高度列是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>
&#13;
答案 2 :(得分:3)
您可以使用新的Bootstrap卡:
<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="..." alt="Card image cap">
<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="..." alt="Card image cap">
<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="..." alt="Card image cap">
<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
的问候,