如何在Bootstrap Grid中居中显示2列

在Bootstrap Grid系统中，要使两列内容居中显示，可以使用Flexbox工具类来实现。以下是实现这一布局的步骤和示例代码：

基础概念

Bootstrap Grid系统基于12列布局，通过使用container、row和col类来创建响应式布局。Flexbox是CSS3的一个模块，用于创建灵活的布局，它允许元素在容器内动态地伸缩以适应可用空间。

类型与应用场景

居中对齐：适用于需要在页面中心显示内容的场景，如仪表板、登录表单等。
响应式布局：适用于需要根据不同设备调整布局的应用。

示例代码

以下是一个简单的HTML示例，展示了如何在Bootstrap Grid中居中显示两列：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Centered Columns</title>
<!-- 引入Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
  .centered-columns {
    min-height: 100vh; /* 确保容器至少占满视口高度 */
  }
</style>
</head>
<body>

<div class="container d-flex justify-content-center align-items-center centered-columns">
  <div class="row w-100">
    <div class="col-md-6 col-lg-5 mx-auto">
      <div class="bg-light p-4 rounded">
        <h2>Column 1</h2>
        <p>This is the first column content.</p>
      </div>
    </div>
    <div class="col-md-6 col-lg-5 mx-auto">
      <div class="bg-light p-4 rounded">
        <h2>Column 2</h2>
        <p>This is the second column content.</p>
      </div>
    </div>
  </div>
</div>

<!-- 引入Bootstrap JS和依赖 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

container：提供了一个响应式的固定宽度容器。
d-flex、justify-content-center 和 align-items-center：这些Flexbox类用于水平和垂直居中内容。
centered-columns：自定义样式，确保容器至少占满视口高度。
col-md-6 col-lg-5 mx-auto：这些类定义了列的宽度，并使用mx-auto自动设置左右外边距以实现居中。