Bootstrap 4卡高度拉伸答案

【问题标题】：Bootstrap 4 card height stretchingBootstrap 4卡高度拉伸
【发布时间】：2020-08-12 15:18:23
【问题描述】：

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

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

【问题讨论】：

您在cards 上设置了固定宽度，这将破坏响应性并将它们堆叠在不够宽的屏幕上。另外，您不需要row，请参阅Bootstrap Documentation for Card Columns。

标签： html css twitter-bootstrap bootstrap-4 bootstrap-cards

【解决方案1】：

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

不要在卡片上设置固定宽度 - 这会破坏响应能力，这就是卡片在某些屏幕上无法正确显示（重叠或堆叠）的原因。
您不需要使用row，因为您使用的是card-columns - 请参阅Bootstrap Documentation for Card Columns。

（您也不需要为 `.card-columns .card 设置 display:inline-block 或 height:auto，但这不是导致问题的原因，因为它适用于它们。）

你可以在下面的sn-p中看到工作代码：

.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>

【讨论】：

谢谢！这在 Safari 中有效，但由于该错误，Chrome 仍然导致它们全部堆叠在一列中（不确定解决方案是什么，但我会继续测试一些东西）。此外，还有这两个问题：1）它们不是堆叠在较小的屏幕尺寸上，而是并排排列的较小版本。我如何让它们在不同的断点堆叠？ 2）垂直方向的卡片之间仍有很大的间隙（即下面的一张应该靠近顶部的一张，如砌体布局）。为什么这不像 Bootstrap 文档中显示的那样工作？
其实已经找到了Chrome问题的解决办法，但其他问题依然存在。
@PoojaCL 专栏是一个不同的问题，所以现在我们将专注于让卡片正常工作。我上面的答案中的 sn-p 是否不能在 Chrome 中为您运行？这在我尝试过的所有浏览器中都非常适合我，并解决了问题中代码中的问题 - 它看起来与 Masonry 布局完全一样，没有间隙等。如果它在 sn-p 中有效但在您的代码中无效，那么你的代码中还有其他东西会影响它，但是如果没有看到你的代码的其余部分，很难知道是什么。它很可能是其他一些 CSS。您是否删除了 .cards-column .card CSS？
我意识到我可以使用我在网上找到的修复程序（寡妇：1，孤儿：1）修复 Chrome 堆叠问题，并通过更改 CSS 中的列数让它们在不同的断点处堆叠.是的，我删除了我拥有的 .cards-column .card CSS。但是，它们的行为不像 Masonry 那样，并且在较短的柱子之间仍然有很大的间隙，而不是彼此相邻。查看实际工作页面的截图：scrgrb.in/gou
@PoojaCL 它不起作用的原因是因为您在每 2 张卡片之后设置一个卡片列 div。这将创建一个包含新列的新行。您只需要一个卡片列容器。看看我的问题中的代码，看看它应该如何设置。

【解决方案2】：

您正在使用 card-column and rowin 一个 divuse row in parent divandcard-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 -->`

【讨论】：

谢谢，这也有效，但我仍然遇到一些问题，我在对第一个答案的评论中列出了这些问题。