Bootstrap 4列中断时的垂直填充

Bootstrap是一个流行的前端开发框架，用于快速构建响应式网站和Web应用程序。Bootstrap提供了一套CSS和JavaScript组件，可以轻松地创建各种布局和样式。

在Bootstrap中，列（column）是用于创建网格布局的基本单位。通过将页面分成12个等宽的列，可以轻松地实现响应式布局。但是，当列在某些屏幕尺寸下换行时，可能会出现垂直方向上的间隙。

为了解决这个问题，Bootstrap提供了一种垂直填充（vertical padding）的解决方案。可以通过在列的外部包裹一个额外的div，并为该div添加.align-items-center类来实现垂直居中对齐。这样可以确保即使列在换行时，垂直方向上的间隙也能得到填充。

以下是一个示例代码：

<div class="row">
  <div class="col-md-6">
    <div class="d-flex align-items-center h-100">
      <!-- 列内容 -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="d-flex align-items-center h-100">
      <!-- 列内容 -->
    </div>
  </div>
</div>

在上面的代码中，.row类用于创建一个行，.col-md-6类用于创建两个等宽的列。每个列的内容被包裹在一个具有.d-flex和.align-items-center类的div中，.d-flex类用于创建一个弹性容器，.align-items-center类用于垂直居中对齐。.h-100类用于设置div的高度为100%，以填充垂直方向上的间隙。

这种垂直填充的解决方案适用于Bootstrap 4及以上版本，并且可以在各种应用场景中使用，例如创建响应式网页布局、构建表单页面等。

腾讯云提供了云服务器（CVM）和云数据库（CDB）等产品，可以用于支持Bootstrap开发的云计算需求。具体产品介绍和链接地址可以参考腾讯云官方网站的相关页面。