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

当前回答

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

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

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

结果如下:

其他回答

您可以添加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添加你想要的高度,示例:

.card{
    height: 350px;
}

您必须添加自己的CSS。

如果你检查文档,这是为砖石风格-这一点是他们不都是相同的高度。

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

<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>

你可以应用h-100级别,代表高度100%。

根据这个问题我有一个答案,它可能会帮助你,你可以使用它。你可以使用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>