如何使Bootstrap 4卡在卡列相同的高度?

我使用引导4 alpha 2和利用卡。具体来说，我正在处理这个来自官方文档的例子。我怎样才能使所有的卡片都是相同的高度?

我现在能想到的就是设置下面的CSS规则:

.card {
    min-height: 200px;
}

但这只是一个硬编码的解决方案，在一般情况下是行不通的。在我的视图中的代码与文档中的代码相同，即:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <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>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card 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>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

当前回答

你可以在Sass中设置$card-height: 100%，默认为~ null

2023-01-10 14:56:44

其他回答

我正在使用Bootstrap 4 (Beta 2)。与此同时，情况似乎发生了变化。我也遇到了同样的问题，但我找到了一个简单的解决方法。这是我的代码:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

使用“col-sm-12 col-lg-6”，我使卡片具有响应性。使用“card h-100”，我将所有卡片设置为它们的父列的高度。在我的系统上这是可行的，但我不是专业的。希望我能帮到别人。

2017-10-29 05:59:58

另一个有用的方法是卡片网格:

<div class="row row-cols-1 row-cols-md-2"> <div class="col mb-4"> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col mb-4"> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col mb-4"> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col mb-4"> <div class="card"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div>

2020-04-27 11:24:20

你可以把类放在“行”或“列”? 如果你在一行上使用它，将不会在卡(边界)上可见。 https://getbootstrap.com/docs/4.6/utilities/flex/#align-items

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

更新bs5完整的HTML示例

https://codepen.io/Kerrys7777/pen/QWgwEeG

2017-04-04 06:04:52

如果有人感兴趣，有一个jquery插件叫做:jquery. matchheight .js

https://github.com/liabru/jquery-match-height

matchHeight使所有选定元素的高度完全相等。它处理了许多导致类似插件失败的边缘情况。

对于一排卡片，我使用:

<div class="row match-height">

然后在站点范围内启用:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

2017-03-20 20:42:58

把卡片包在里面

< div级= card-group " > < / div >

< div级= card-deck " > < / div >

2017-12-30 13:51:30

如何使Bootstrap 4卡在卡列相同的高度?

推荐文章

最新文章

标签