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

当前回答

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

其他回答

把卡片包在里面

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

or

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

更新:在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张相同高度的卡片

您可以添加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>

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

斯菲德尔

只需要用CSS添加你想要的高度,示例:

.card{
    height: 350px;
}

您必须添加自己的CSS。

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