Bootstrap 高度自动填充

如果你想让 Bootstrap 中的某个元素（如卡片或者容器）高度自动填充，可以使用 Flexbox。具体来说，可以将该元素的父元素的 `display` 属性设置为 `flex`，然后将该元素的 `flex-grow` 属性设置为 `1`，这样该元素就会自动填充剩余的空间，从而达到高度自动填充的效果。例如：

<div class="d-flex flex-column" style="height: 200px;">
  <div class="card flex-grow-1">
    <!-- 卡片内容 -->
  </div>
</div>

在上面的例子中，我们将一个包含卡片的容器设置为 `flex` 布局，并将该容器的高度设置为 `200px`。然后，我们将卡片元素的 `flex-grow` 属性设置为 `1`，这样卡片元素就会自动填充剩余的空间，从而达到高度自动填充的效果。

相关问题

Bootstrap 3 高度自动填充

在 Bootstrap 3 中，可以使用 `display: table` 和 `display: table-cell` 属性来实现高度自动填充。具体来说，可以将父元素的 `display` 属性设置为 `table`，将子元素的 `display` 属性设置为 `table-cell`，然后将子元素的高度设置为 `100%`，这样子元素就会自动填充父元素的高度。例如：

<div class="table" style="height: 200px;">
  <div class="table-cell">
    <!-- 内容 -->
  </div>
</div>

在上面的例子中，我们将容器元素的 `display` 属性设置为 `table`，将卡片元素的 `display` 属性设置为 `table-cell`，然后将卡片元素的高度设置为 `100%`，这样卡片元素就会自动填充容器元素的高度，从而达到高度自动填充的效果。

需要注意的是，使用 `display: table` 和 `display: table-cell` 属性来实现高度自动填充可能会对布局产生一定的影响，因此在使用时需要谨慎。同时，在 Bootstrap 4 中，推荐使用 Flexbox 来实现高度自动填充。

bootstrap中填充剩余高度

在Bootstrap中，可以使用Flexbox布局来实现填充剩余高度的效果。具体实现方法如下：

1. 首先，需要将父容器的display属性设置为flex，以开启Flexbox布局。

2. 其次，将子容器的flex属性设置为1，表示该子容器将占用剩余空间的比例。例如，如果有两个子容器，一个高度为100px，另一个需要填充剩余高度，则需要将后者的flex属性设置为1。

下面是一个示例代码：

<div class="d-flex flex-column" style="height: 500px;">
  <div style="height: 100px; background-color: red;"></div>
  <div style="flex: 1; background-color: blue;"></div>
</div>

在上面的代码中，父容器的`d-flex`类表示开启Flexbox布局，`flex-column`类表示垂直排列子容器。子容器中，第一个容器高度为100px，第二个容器的`flex`属性设置为1，表示自动填充剩余高度。

需要注意的是，这种方式只适用于父容器的高度已知的情况。如果父容器的高度未知，需要使用JavaScript来动态计算。