Bootstrap 4列中相同高度的卡片

Posted 2023-03-05

技术标签:

【中文标题】Bootstrap 4列中相同高度的卡片【英文标题】：Bootstrap 4 Cards of same height in columns 【发布时间】：2017-11-11 02:02:42 【问题描述】：

我目前正在使用 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" >
            <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" >
            <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" >
            <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 的直接子代。 【参考方案1】：

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

【讨论】：

【参考方案2】：

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

  <div class="card-deck">
    <div class="card mb-2">
        <img class="card-img-top img-fluid" src="//placehold.it/500x180" >
        <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" >
        <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】：

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

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" >
                    <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" >
                    <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" >
                    <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 的非常简单的解决方案。这对我有用。【参考方案4】：

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

【讨论】：

【参考方案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】：

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

【讨论】：

【参考方案7】：

据我所知，如果没有 javascript 或 flexbox (https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback)

【讨论】：

以上是关于Bootstrap 4列中相同高度的卡片的主要内容，如果未能解决你的问题，请参考以下文章

具有两列和三个卡片 ui 元素的相同高度

Bootstrap 4 卡片 - 在底部对齐内容

如何将按钮定位在 bootstrap 4 卡的底部？

具有基于视口的列数的 Bootstrap 4 卡片组

使 ReactStrap/Bootstrap4 卡在不同的列中具有相同的高度

如何使用 flexbox 将所有元素放入 React-Bootstrap 卡中？