列中相同高度的Bootstrap 4卡

一尘不染

列中相同高度的Bootstrap 4卡

css

我目前正在使用Bootstrap中的Cards。

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

我不介意使用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>

阅读 247

2020-05-16

共1个答案

一尘不染

该引导4列已经使用了Flexbox的，使他们都在 同一高度 。只需 h-100 在卡上使用高度：100％，它们就会填满列…

<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

2020-05-16