Bootstrap 4多个子div列填充高度100%

Bootstrap 4是一个流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的工具和组件。在Bootstrap 4中，要实现多个子div列填充高度100%，可以使用Flexbox布局或者CSS Grid布局。

使用Flexbox布局：

1. 在父容器上添加样式d-flex flex-column，将其设置为Flex容器，并使子元素垂直排列。
2. 在子div列上添加样式flex-grow-1，使其自动填充剩余空间。

示例代码：

<div class="d-flex flex-column" style="height: 100vh;">
  <div class="flex-grow-1">子div列1</div>
  <div class="flex-grow-1">子div列2</div>
  <div class="flex-grow-1">子div列3</div>
</div>

使用CSS Grid布局：

1. 在父容器上添加样式display: grid，将其设置为Grid容器。
2. 在子div列上添加样式grid-row: 1 / -1，使其跨越所有的网格行。

示例代码：

<div style="display: grid; grid-template-rows: 1fr 1fr 1fr; height: 100vh;">
  <div style="grid-row: 1 / -1;">子div列1</div>
  <div>子div列2</div>
  <div>子div列3</div>
</div>

以上两种方法都可以实现多个子div列填充高度100%的效果。具体选择哪种方法取决于项目需求和开发者的偏好。

关于Bootstrap 4的更多信息和使用方法，可以参考腾讯云的Bootstrap 4文档： Bootstrap 4文档