Bootstrap 4 列相同高度的卡片答案

【问题标题】：Bootstrap 4 Cards of same height in columnsBootstrap 4 列相同高度的卡片
【发布时间】：2023-01-13 03:00:54
【问题描述】：

我目前正在使用 Bootstrap 中的卡片。

根据文本标题，我将获得不同高度的卡片，并希望与最高的卡片具有相同的高度。

我不介意使用我实际上认为可能是解决问题的最佳方法的 JS。

我试过使用 CSS 的不同解决方案，比如使用 flexbox。

动态呈现的呈现 HTML 这是一个简单的示例：

.card {
  float: left;
  width: 100%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
  box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);
}

.card>img {
  margin-bottom: .75rem;
  display: block;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.card-text {
  font-size: 85%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SMITE FR</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/album.css" rel="stylesheet">
  <link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
  <script src="https://www.w3schools.com/lib/w3data.js"></script>
  <link rel="import" href="navigation.html">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="card-deck">
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="BeatsX">
            <h1 class="card-title">BeatsX</h1>
            <div class="text-center">
              <p>1188.0000</p>
              <p>2017-06-09 10:00:00</p>
              <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
            <h1 class="card-title">Nitendo Switch</h1>
            <div class="text-center">
              <p>2899.0000</p>
              <p>2017-06-10 10:00:00</p>
              <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
            <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
            <div class="text-center">
              <p>6388.0000</p>
              <p>2017-06-06 10:00:00</p>
              <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

删除你的.col-xx-yy div。将.cards 保留为.card-deck 的直接子代。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4 列已经使用了 flexbox，因此它们是这一样高.只需使用h-100对于卡片上的高度：100%，它们将填满列...

https://codeply.com/go/hKhPuxoovH

<div class="container">
    <div class="row">
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="BeatsX">
                    <h1 class="card-title">BeatsX</h1>
                    <div class="text-center">
                        <p>1188.0000</p>
                        <p>2017-06-09 10:00:00</p>
                        <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
                    <h1 class="card-title">Nitendo Switch</h1>
                    <div class="text-center">
                        <p>2899.0000</p>
                        <p>2017-06-10 10:00:00</p>
                        <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
                    <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
                    <div class="text-center">
                        <p>6388.0000</p>
                        <p>2017-06-06 10:00:00</p>
                        <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
        </div>
</div>

也没有理由浮动卡，.col-*应该直接在.row，而不是.card-deck

【讨论】：

非常感谢，我删除了.card-deck 感谢您提供信息
辉，多少次我都在进行这种等高战。最后，一个没有 Javascript 的非常简单的解决方案。这对我有用。

【解决方案2】：

将卡片组用于同等大小的卡片，下面的代码对我有用

  <div class="card-deck">
    <div class="card mb-2">
        <img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap">
        <div class="card-body">
            <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 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 mb-2">
        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
        <div class="card-body">
            <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.This card has supporting text below as a natural lead-in to additional content.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>

Reference you can find here

【讨论】：

【解决方案3】：

据我所知，没有 javascript 或 flexbox 是行不通的 (https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback)

【讨论】：

【解决方案4】：

使用 flex 获取示例下方的内容

        .main {
            display: flex;
        }
        .child {
            flex:1;
            border:1px solid tomato;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: column nowrap;
        }
        .content-child{
            padding: 5px;
        }

<div class="main">
    <div class="child">
        <div class="content">
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="child"></div>
</div>

【讨论】：

【解决方案5】：

尝试给卡高度看这个fiddle

.card {
    float: left;
    width: 100%;
    padding: .75rem;
    height:80vh;
    margin-bottom: 2rem;
    border: 0;
    box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}

【讨论】：

height:80vh这不是响应方式

【解决方案6】：

使用Flexbox你得到了相同高度的卡片

.card-deck {
  display:flex;
  flex-wrap: wrap;
}
.card {
    float: left;
    width: 100%;
    height:100%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
    box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}

.card > img {
    margin-bottom: .75rem;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.card-text {
    font-size: 85%;
}

@media (max-width:767px){
  .card-deck {
    display:block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="card-deck">
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="BeatsX">
          <h1 class="card-title">BeatsX</h1>
          <div class="text-center">
            <p>1188.0000</p>
            <p>2017-06-09 10:00:00</p>
            <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
          <h1 class="card-title">Nitendo Switch</h1>
          <div class="text-center">
            <p>2899.0000</p>
            <p>2017-06-10 10:00:00</p>
            <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
          <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
          <div class="text-center">
            <p>6388.0000</p>
            <p>2017-06-06 10:00:00</p>
            <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案7】：

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
        <!--YOUR CARD HERE-->
        </div>
    </div>
</div>

【讨论】：