Med*_*ric 1 html css twitter-bootstrap bootstrap-4
我目前正在使用Bootstrap中的Cards
根据文字标题的不同，我会得到不同的卡片高度，并希望与最高的卡片高度相同。
我不介意使用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>该引导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.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
| 归档时间： |
|
| 查看次数： |
8407 次 |
| 最近记录： |