如何使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>

当前回答

Bootstrap 4有你需要的一切:使用.d-flex和.flex-fill类。不要使用卡片组，因为他们没有反应。我使用了col-sm，你可以使用你想要的col类，或者使用col-lg-x, x表示宽度列的数量，例如4或3，如果帖子有很多，那么每列3或4

尝试将浏览器窗口缩小到XS以查看它的运行情况:

2018-03-09 15:49:42

其他回答

你可以使用card-deck，它会对齐所有的卡片…这来自bootstrap 4官方页面。

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
</div>

2020-04-07 16:25:16

根据这个问题我有一个答案，它可能会帮助你，你可以使用它。你可以使用height属性并将其设置为height: 100vh;我已经使用了70vh和卡将固定高度，你给的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script> <style> /*Use height property to set equil card height*/ .card { background-color: #56568a; margin: 10px !important; height: 70vh; width: auto; } </style> <body> <div class="container"> <div class="col-sm-6 col-md-6 col-lg-3"> <div class="card"> <img class="card-img-top img-fluid" src="img5.PNG" alt="Card image cap"> <div class="card-block"> <small class="purple"> Product Launch</small> <h4 class="card-title">Leveraging Social Proof for Growth</h4> <p class="card-text">Duolingo removes language barriers by connecting people that need websites translated with students that learning a language...</p> <p class="card-text "><i class="far fa-user"></i><small class="purple">Praveen</small> <i class="far fa-clock "></i><small class="purple">Today</small> </p> </div> </div> </div> <div class="col-sm-6 col-md-6 col-lg-3"> <div class="card"> <img class="card-img-top img-fluid" src="img6.PNG" alt="Card image cap"> <div class="card-block"> <small class="purple"> ddc</small> <h4 class="card-title">Leveraging Social Proof for Growth</h4> <p class="card-text">Duolingo removes language barriers by connecting people that need websites translated with students that learning a language...</p> <p class="card-text"><i class="far fa-user"></i><small class="purple">Praveen</small> <i class="far fa-clock "></i><small class="purple">2 days ago</small> </p> </div> </div> </div> </div> </body> </html>

2021-04-09 10:22:42

我遇到过这个问题，大多数人使用jQuery…这是我的解决方案。“别介意，我在这方面只是个初学者……”

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

如果任何卡片项的高度是400px(基于它的内容)，因为flex-align的默认值是拉伸，那么.card-item(行或卡片收集类的子类)将被拉伸。将卡的高度设置为父卡的100%，就会占据这个高度。

我希望我是对的。我是吗?

2020-07-12 00:58:43

更新:在Bootstrap 4中，flexbox现在是默认的，每个卡组行将包含3张卡。卡片将填满高度。

http://codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha卡片列使用CSS3列，它并不真正支持等高(列填充除外，它只在Firefox中支持)。

如果你启用Bootstrap 4 flexbox模式，你可以使用卡片组和一点CSS来平衡高度，每3列换行一次。

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

相关的在列中引导4张相同高度的卡片

2016-03-10 14:44:02

如果有人感兴趣，有一个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

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

推荐文章

最新文章

标签