如何使 Bootstrap 4 列高度相同? [重复]

问题描述 投票:0回答:3

免责声明。这个问题之前被问过很多次了。但随着时间的流逝,现在我们即将发布完全支持 Flexbox 的 Bootstrap 4,现在是对同一问题给出新答案的时候了。

我想用 Bootstrap 4 创建相等的列高。这是预期结果的演示:

我想要一个适用于所有浏览器的解决方案,并且受 Bootstrap 4 支持。如果不涉及 JS 就更好了。一些现有的解决方案基于 Bootstrap 3,一些无法在 MacOS 上的 Safari 中工作。

更新。看来我做错了研究。 Bootstrap 4 默认情况下具有相同的高度。我已经添加了带有插图的更新图像。你不需要做任何事情,它已经在那里了。

html css twitter-bootstrap
3个回答
38
投票

您只需将

class="row-eq-height"
class="row"
一起使用即可为以前的引导程序版本获得相同高度的列。

但是对于 Bootstrap 4,这是原生的。


16
投票

等高列是 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>


6
投票

您可以使用新的 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>

链接:点击这里

问候,

© www.soinside.com 2019 - 2024. All rights reserved.