Bootstrap4 在列中获取卡片以水平和垂直拉伸和填充父容器

Question

我正在使用 Bootstrap 4。我在中型和更大的显示器上创建了一行，每列 3 列，大小为 4。每张卡片中的内容可能大小不同，但我仍然希望每张卡片的长度相同。

我没有使用卡片组/卡片组，因为它们没有响应性，我希望卡片在小型/xs 显示器上占据所有 12 行。

以下是与卡片相关的代码的 sn-p。我也有 Plunker 上的项目以供实时查看：http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info。如果您在大型显示器上打开项目，则卡片大小不同。

Bootstrap 4 说如果没有提供宽度，卡片默认拉伸以填充其容器的整个宽度。假设它填充了包含卡片的父容器的整个宽度（即在下面的情况下为 col-md-4 的 div），我错了吗？

如果我错了，我该如何让 3 张卡片水平伸展以填充其放置的列的整个宽度以及垂直伸展到相同的大小？我尝试添加flex-column flex-grow，但这只是水平而不是垂直调整它们的大小。处理此问题的最佳方法是什么？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card ">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

编辑：

我通过为每个 card div 添加一个类并将宽度设置为 100% 来实现这一点。我仍然不确定这是否是正确的方法，因为我假设卡片会自动执行此操作。

Answer 1

您的列在移动设备上的宽度为100%。但是这些列内的卡片仍然有auto的宽度。

因此您可以在每张卡片上添加the w-100 class。

请检查结果。是你想要达到的吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

---

更新

要一次管理所有卡片的属性，您可以将自己的类分配给包含所有这些卡片的行。 Bootstrap 不禁止使用您自己的 CSS。

.row-whith-wide-cards .card {
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row row-whith-wide-cards">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>