Bootstrap 4 Cards of same height in columns

2020-01-26 11:53发布

站内问答 / HTML/CSS
1791 6 4

I'm currently working on Cards from Bootstrap

Depending on the text title i will get 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>

6条回答
祖国的老花朵
2楼-- · 2020-01-26 11:55

Using Flexbox you got the equal height of the card 

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

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2020-01-26 11:58

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

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
4楼-- · 2020-01-26 12:08

Use card-deck for equal size card this below code works for me

  <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

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
5楼-- · 2020-01-26 12:10

Try giving height to card see this 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);
}
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
6楼-- · 2020-01-26 12:21

Use flex for get it below an example

        .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人赞 添加讨论(0) 举报
一夜七次
7楼-- · 2020-01-26 12:22

As far as I know not doable without either javascript or flexbox (https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)