Bootstrap 4 列中相同高度的卡片 [英] Bootstrap 4 Cards of same height in columns

查看：27
本文介绍了Bootstrap 4 列中相同高度的卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用 Bootstrap 制作卡片.

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

我不介意使用 JS，我认为这可能是解决问题的最佳方法.

我尝试过使用 CSS 中的不同解决方案，例如使用 flexbox.

呈现的 HTML 是动态呈现的，这是一个简单的例子:

.card {向左飘浮;宽度:100%；填充:.75rem；边距底部:2rem；边框:0；box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);}.card>img {底边距:0.75rem；显示:块；宽度:80%；高度:自动；左边距:自动；右边距:自动；}.card-text {字体大小:85%；}

<html lang="zh-cn"><头><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="样式表"><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"><身体><div class="容器"><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 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 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>

</html>

解决方案

Bootstrap 4 列已经使用了 flexbox，所以它们是相同的高度.只需在卡片上使用 h-100 表示高度:100%，它们就会填满列...

https://www.codeply.com/go/hKhPuxoovH

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

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

I'm currently working on Cards from Bootstrap.

Depending on the text title I will get the different height for the cards and would like to have the same height as the tallest one.

I don't mind using JS I actually think is probably the best way to approach the problem.

I have tried using different solutions from the CSS like using flexbox.

The rendered HTML as it is rendered dynamically here's a simple example:

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

解决方案

The Bootstrap 4 columns already use flexbox so they are the same height. Just use h-100 for height:100% on the cards and they'll fill the columns...

https://www.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>

Also there is no reason to float the cards, and the .col-* should be directly in the .row, not .card-deck

这篇关于Bootstrap 4 列中相同高度的卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆