我使用引导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>

当前回答

您可以添加d-flex和flex-column的div与卡体。

下面是一个工作示例:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-4 d-flex align-self-stretch"> <div class="card shadow-sm mb-4"> <img src="https://placehold.it/500x300" class="card-img-top" alt=""> <div class="card-body d-flex flex-column"> <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5> <p class="text-muted">Lorem ipsum dolor </p> <div class="mt-auto border border-danger"> <p class="text-uppercase mb-0">Hello World!</p> <p class="text-uppercase">consectetur adipiscing elit</p> <a href="#" class="btn btn-info btn-block">CTA</a> </div> </div> </div> </div> <div class="col-4 d-flex align-self-stretch"> <div class="card shadow-sm mb-4"> <img src="https://placehold.it/500x300" class="card-img-top" alt=""> <div class="card-body d-flex flex-column"> <h5 class="card-title text-uppercase">Smaller title here that wraps 1 line</h5> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="mt-auto border border-danger"> <p class="text-uppercase mb-0">Hello World!</p> <p class="text-uppercase">adipiscing </p> <a href="#" class="btn btn-info btn-block">CTA</a> </div> </div> </div> </div> <div class="col-4 d-flex align-self-stretch"> <div class="card shadow-sm mb-4"> <img src="https://placehold.it/500x300" class="card-img-top" alt=""> <div class="card-body d-flex flex-column"> <h5 class="card-title text-uppercase">Longer title here that wraps 3 lines, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="mt-auto border border-danger"> <p class="text-uppercase mb-0">Hello World!</p> <a href="#" class="btn btn-info btn-block">CTA</a> </div> </div> </div> </div> </div> </div>

其他回答

以下是我的做法:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

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

我采取了一种稍微不同的方法。使用Card Deck包装器

我添加了一个样式规则来限制卡块的高度:

.card .card-block {max-height:300px;overflow:auto;}

结果如下:

你可以把类放在“行”或“列”? 如果你在一行上使用它,将不会在卡(边界)上可见。 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

根据这个问题我有一个答案,它可能会帮助你,你可以使用它。你可以使用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"> <!-- Bootstrap 4.5 CSS--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- Bootstrap JS Requirements --> <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>