时间戳

首页 > 解决方案 > Bootstrap 4卡高度拉伸

html - Bootstrap 4卡高度拉伸

问题描述

出于某种原因，当我尝试使用 Bootstrap 4 的卡片栏时，较短卡片的高度最终会拉伸到与旁边的卡片相等。仅当我将“行”类应用于父 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>

标签： htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

解决方案

您 在父母中card-column and row一次div使用并 像这样使用row divcard-columnchild 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 -->`

推荐阅读