logo标签列表

Bootstrap 4列中高度相同的卡片

htmlcsstwitter-bootstrapbootstrap-4
8
我目前正在使用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 divs。将 .card 直接作为 .card-deck 的子元素。 - tmg
7个回答
28

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，感谢您提供的信息。 - Mederic
哎呀，我曾经为等高度问题苦战无果了很多次。最终找到了一个非常简单的解决方案，而且不需要使用JavaScript。这对我来说非常有效。 - Tillito
2

使用card-deck可以使卡片大小相等，以下代码对我有效：

使用以下代码实现：

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

最初的回答可以在此处找到：

参考链接

。
0

尝试为卡片设置高度，查看此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 不是响应式的方式。 - Nafaz M N M
0
<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
        <!--YOUR CARD HERE-->
        </div>
    </div>
</div>
0
0

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

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接