Bootstrap 4卡高度拉伸

Question

出于某种原因，当我尝试使用 Bootstrap 4 的卡片列时，较短的卡片的高度最终会拉伸到与旁边的卡片相等。仅当我将 'row' class 应用于父 div 时才会发生这种情况。但是，如果我删除 'row' class，卡片会在 Chrome 中相互堆叠（这是一个已知错误，但我还没有找到其他解决方案）并且不要在 Safari 中堆叠在较小的屏幕尺寸上。我遇到的另一个问题是，如果我对卡片应用 100% 高度，它们不会拉伸，但它下面的卡片不会靠近上面的卡片，所以有很大的差距。

我认为以这种方式使用卡片列的目的是为了实现 Masonry 外观，但对我来说似乎不是这样。我猜它可能与 'row' class 上的 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>

Answer 1

你正在使用 card-column and rowin one divuse row in parent divand card-columnin 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 -->`

Answer 2

您只需进行 2 处更改即可使其正常工作。

不要在卡片上设置固定宽度 - 这会破坏响应能力，这就是它们无法正确显示（重叠或堆叠）的原因在某些屏幕上。
您不需要使用 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>

Bootstrap 4卡高度拉伸

Bootstrap 4 card height stretching

html

css

twitter-bootstrap

bootstrap-4

bootstrap-cards