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。具体来说，可以将该元素的父元素的 `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 DIV 自动填充

在Bootstrap 3中，可以使用`col-*`类来实现DIV自动填充。`col-*`类是用于设置列宽度的类，其中`*`表示列所占的屏幕宽度比例，总共有12个单位，例如`col-md-4`表示占据屏幕宽度的四分之一。如果想要让一个DIV自动填充父容器的宽度，可以在该DIV的类中添加`col-xs-12`类，其中`xs`表示超小屏幕（<768px），`12`表示占据12个屏幕宽度单位。这样，该DIV将占据父容器的全部宽度，并自动填充。例如：

<div class="row">
  <div class="col-xs-12">
    <p>这个DIV将占据父容器的全部宽度，并自动填充。</p>
  </div>
</div>

值得注意的是，如果父容器也是一个`col-*`类，则需要在该类中添加`row`类来创建一个行容器，以确保子容器能够正确地自动填充。例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>这个DIV将占据父容器的一半宽度，自动填充。</p>
    </div>
    <div class="col-md-6">
      <p>这个DIV将占据父容器的一半宽度，自动填充。</p>
    </div>
  </div>
</div>