Bootstrap 4列中相同高度的卡片 [英] Bootstrap 4 Cards of same height in columns
本文介绍了Bootstrap 4列中相同高度的卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在从Bootstrap制作卡片
根据文本标题，我会得到不同的卡片高度，并希望与卡片的高度相同最高的一个。
我不介意使用JS，我实际上认为这可能是解决这个问题的最好方法。
我尝试过使用不同的解决方案，例如使用flexbox
动态呈现呈现的HTML这里有一个简单的例子：
.card {float：left;宽度：100％;填充：.75rem; margin-bottom：2rem; border：0; box-shadow：0px 0px 8px 0.3px rgba（0,0,0,1）; } .card> img {margin-bottom：.75rem;显示：块;宽度：80％;身高：自动; 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-typecontent =text / html; charset = UTF-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < meta name =viewportcontent =width = device-width，initial-scale = 1> < title> SMITE FR< / title> < link href =css / bootstrap.min.css =stylesheet> < link href =css / album.css =stylesheet> < link href =css / ie10-viewport-bug-workaround.min.css =stylesheet> < script src =https://www.w3schools.com/lib/w3data.js>< / script> < link rel =importhref =navigation.html> < /头> <身体GT; < 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.jpgalt =BeatsX> < h1 class =card-title> BeatsX< / h1> < div class =text-center> < p为H. 1188.0000< / p为H. < p> 2017-06-09 10：00：00< / p> < a href =god.php？ID = 2target =_ blankclass =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.jpgalt =Nitendo Switch> < h1 class =card-title> Nitendo Switch< / h1> < div class =text-center> < p为H. 2899.0000< / p为H. < p> 2017-06-10 10：00：00< / p> < a href =god.php？ID = 3target =_ blankclass =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.jpgalt =iPhone 7 128GB（Jet Blakc）> < h1 class =card-title> iPhone 7 128GB（Jet Blakc）< / h1> < div class =text-center> < p为H. 6388.0000< / p为H. < p> 2017-06-06 10：00：00< / p> < a href =god.php？ID = 1target =_ blankclass =btn btn-primary> Voir la Fiche< / a> < / DIV> < / DIV>< / DIV> < / DIV> < / DIV> < / DIV> < /体> < / html>
解决方案
< Bootstrap 4列已经使用flexbox，因此它们 相同高度。只需在卡片上使用 h-100 填充高度：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.jpgalt =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 = 2target =_ blankclass =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.jpgalt =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 = 3target =_ blankclass =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.jpgalt =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 = 1target =_ blankclass =btn btn-primary> Voir la Fiche< / a>
< / div>
< / div>
< / div>
< / div>
< / div>
另外，没有理由使卡片浮动，并且 .col- * 应直接位于 .row 中，而不是 .card-deck
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>
解决方案
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屋！
查看全文
