html - Bootstrap 4卡高度拉伸

Question

出于某种原因，当我尝试使用 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>

Answer 1

您 在父母中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 -->`

Answer 2

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

1. 不要在卡片上设置固定宽度- 这会破坏响应能力，这就是它们在某些屏幕上无法正确显示（重叠或堆叠）的原因。

2. 您不需要使用row，因为您正在使用card-columns- 请参阅Card Columns 的 Bootstrap 文档。

（您也不需要为 `.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>