使用Bootstrap行、容器和列将列颜色扩展到页面底部

<div class="container">
  <!-- 页面内容 -->
</div>

<div class="container">
  <div class="row">
    <!-- 列内容 -->
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-3">
      <!-- 列内容 -->
    </div>
    <div class="col-3">
      <!-- 列内容 -->
    </div>
    <div class="col-3">
      <!-- 列内容 -->
    </div>
    <div class="col-3">
      <!-- 列内容 -->
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-3 custom-column">
      <!-- 列内容 -->
    </div>
    <div class="col-3 custom-column">
      <!-- 列内容 -->
    </div>
    <div class="col-3 custom-column">
      <!-- 列内容 -->
    </div>
    <div class="col-3 custom-column">
      <!-- 列内容 -->
    </div>
  </div>
</div>

.custom-column {
  background-color: #f2f2f2; /* 设置列的背景颜色 */
  height: 100%; /* 将列的高度设置为100%以扩展到页面底部 */
}