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

Question

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

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

下面是与卡片相关的代码片段。我还有一个关于 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>

编辑：

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

Answer 1

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

因此您可以将类别添加w-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">

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