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

当前回答

对于引导5和4

把你所有的卡片放在div中,class="card-deck"

WIDTH -给出你所有卡片的样式{min-width: 50ch}

其他回答

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

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

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

结果如下:

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

我遇到过这个问题,大多数人使用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%,就会占据这个高度。

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

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