使 Bootstrap4 卡片宽度拉伸 100%答案

【问题标题】：Make Bootstrap4 card width stretch 100%使 Bootstrap4 卡片宽度拉伸 100%
【发布时间】：2020-12-25 19:26:52
【问题描述】：

我正在尝试放置 3 张卡片，其中 Card1 定义了总高度，而 Card2 和 Card3 位于右列。我的问题是 Card2 和 Card 3 没有占用 100% 的剩余宽度。如何让 Bootstrap4 卡片宽度拉伸 100%？ Card1 已经被拉伸，但 Card2 和 Card3 在 flex 列内并且没有被拉伸。如何拉伸它们？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-6 border">
            <div class="card shadow m-5">
                <div class="card-body" style="height:300px;">
                    <h3>Card 1</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 border">
            <div class="d-flex flex-column h-100 position-absolute overflow-hidden">
                <div class="d-flex align-items-start">
                    <div class="card shadow m-5">
                        <div class="card-body">
                            <h3>Card 2</h3>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-stretch overflow-hidden">
                    <div class="card shadow m-5 overflow-auto">
                        <div class="card-body">
                            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以删除一些无用的 div 并更新您的代码，如下所示：

@media (min-width:767px) {
  .custom {
    height: 0;
    min-height: 100%;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6 border">
      <div class="card shadow m-5">
        <div class="card-body" style="height:250px;">
          <h3>Card 1</h3>
        </div>
      </div>
    </div>
    <div class="col-md-6 border">
      <div class=" d-flex flex-column overflow-hidden custom">
        <div class="card shadow m-5">
          <div class="card-body">
            <h3>Card 2</h3>
          </div>
        </div>
        <div class="card shadow m-5 overflow-auto">
          <div class="card-body">
            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

了解高度/最小高度技巧的相关问题： How can you set the height of an outer div to always be equal to a particular inner div?

【讨论】：

感谢您的好主意。我开始对这个解决方案有不同的问题。 card2 也有一个滚动条，但我需要它的高度与它的内容需要的一样高。如何调整？
@Kogelet 从中删除溢出自动，它不会得到滚动条（只保留在卡片上）
这是一个很酷的解决方案。它有帮助。唯一剩下的问题是它没有响应。位于右侧的卡片消失了。
@Kogelet 这是由于您的逻辑，因为您希望右侧基于左侧，因此当它在下方时，它将为 0。您可能需要考虑媒体查询并定义高度： 0 仅在桌面模式下，因此它有一个 height:auto on mobile