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

Question

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

我没有使用卡片组/卡片组，因为它们没有响应，我希望卡片在小型/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% 来实现这一点。我仍然不确定这是否是正确的方法，因为我假设卡片会自动执行此操作。

标签： htmlcssbootstrap-4

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>