Html 如何使 Bootstrap 4 列的高度都相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42551121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make Bootstrap 4 columns all the same height?
提问by dandaka
Disclaimer.This question was asked manytimes before. But since time has passed and now we are close to Bootstrap 4 release with full flexbox support, it is time for new answers for the same question.
免责声明。这个问题之前被问过很多次了。但是随着时间的流逝，现在我们接近具有完整 flexbox 支持的 Bootstrap 4 版本，是时候为同一问题提供新的答案了。
I want to create equal column height with Bootstrap 4. Here is demo of intended result:
我想用 Bootstrap 4 创建相等的列高。这是预期结果的演示：
I want a solution, that works in all browsers, that are supported by Bootstrap 4. Better if no JS involved. Some of existing solution are based on Bootstrap 3, some aren't working in Safari on MacOS.
我想要一个解决方案，它适用于所有浏览器，由 Bootstrap 4 支持。如果不涉及 JS 更好。一些现有的解决方案基于 Bootstrap 3，一些不适用于 MacOS 上的 Safari。
Update.Seems I did wrong research. Bootstrap 4 ships with equal height by default. I have included an updated image with illustration. You don't need to do anything, it is already there.
更新。看来我做了错误的研究。默认情况下，Bootstrap 4 具有相同的高度。我已经包含了一个带有插图的更新图像。你不需要做任何事情，它已经在那里了。
采纳答案by neophyte
You just have to use class="row-eq-height"with your class="row"to get equal height columns for previous bootstrap versions.
您只需要class="row-eq-height"与您一起使用class="row"即可为以前的引导程序版本获得相同高度的列。
but with bootstrap 4 this comes natively.
但是对于 bootstrap 4，这是原生的。
check this link --http://getbootstrap.com.vn/examples/equal-height-columns/
检查此链接--http://getbootstrap.com.vn/examples/equal-height-columns/
回答by Quentin
Equal height columns is the default behaviour for Bootstrap 4 grids.
等高列是 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-rwtheitroadesjU2yc3z8GV/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>回答by Serge Inácio
You can use the new Bootstrap cards:
您可以使用新的 Bootstrap 卡：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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>Link: Click here
链接：点击这里
regards,
问候，
