问题描述
由于某种原因，当我尝试使用Bootstrap 4的卡片列时，较短的卡片的高度最终会拉伸到与旁边的卡片相等。仅当我将'row'类应用于父div时才会发生这种情况。但是，如果我删除“行”类，则卡在Chrome中会彼此叠放（这是一个已知的错误，尽管我还没有找到其他解决方案），并且也不会在较小的屏幕上叠放在Safari中。我遇到的另一个问题是，如果我对卡片施加100％的高度，它们将不会伸展，但是其下方的卡片不会靠近其上方的卡片，因此会有很大的差距。
我认为以这种方式使用卡片列的目的是要获得砌体外观，但对我而言似乎并没有这种行为。我猜想它可能与“行”类上的flexBox属性有关，但似乎我需要这样做才能使它们在2列中并排放置。
下面是我的代码。让我知道你们中是否有人对此有解决方案。预先谢谢你！
.row {
display:-webkit-Box;
display:-ms-flexBox;
display:flex;
-ms-flex-wrap:Nowrap;
flex-wrap:Nowrap;
margin-right: 30px;
margin-left: 30px;
}
.card-columns .card {
width: 320px !important;
display: inline-block !important;
height: auto;
}
.card-columns {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-columns row">
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
</div>
</div>解决方法
您正在card-column and row中使用div，在父row 中使用div，在card-column中使用child div
像这样使用
<div class=row">
<div class="card-columns">
<?php
// Create and check connection
if ($result->num_rows > 0) {
// output card design
while($row = $result->fetch_assoc()) {
echo '<div class="card">
<img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
<div class="card-block">
<h4 class="card-title">' . $row["name"] . '</h4>
<p class="card-text">Text. Card content.</p>
</div>
<div class="card-footer text-muted">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li>14</li>
</ul>
</div>
</div><!-- card -->';
}
} else {
echo "0 results";
}
$conn->close();
?>
</div><!-- container card-columns -->
</div><!-- row -->`
您只需进行两项更改即可使其工作。
-
不要在卡上设置固定宽度-这会破坏响应能力，这就是为什么它们在某些屏幕上无法正确显示（重叠或堆叠）的原因。
-
您不需要使用
row，因为您正在使用card-columns-请参见Bootstrap Documentation for Card Columns。
（您也无需为.card-columns .card设置display:inline-block或height:auto，但这不是引起问题的原因，因为它将与它们一起工作。）
您可以在下面的代码段中查看工作代码：
.card-columns {
-webkit-column-count: 2 !important;
-moz-column-count: 2 !important;
column-count: 2 !important;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-columns">
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
</div>
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
</div>
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
<div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
<div class="my-3 p-3">
<h3 class="display-6">TITLE TITLE TITLE TITLE TITLE TITLE TITLE</h3>
<p class="lead-portfolio">Some text</p>
</div>
</div>
<div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
<div class="my-3 p-3">
<h3 class="display-6-dark">TITLE</h3>
<p class="lead-portfolio-dark">Some text</p>
</div>
</div>
</div>
</div>