Bootstrap 5中如何在col内嵌套column实现列表列布局？

直接利用Bootstrap 5的网格嵌套特性和row-cols工具类就能实现，无需额外自定义样式，具体步骤如下：

核心思路 #

Bootstrap的网格系统允许在任意col内部嵌套row和子col，对于ul列表，我们可以直接将ul转为网格行容器，把每个li作为网格列，快速实现多列布局。

修改示例代码 #

假设你原本的学生信息卡片代码如下：

<div class="container">
  <div class="row">
    <!-- 父级col -->
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">学生基本信息</h5>
          <!-- 原本单行的ul -->
          <ul class="list-unstyled">
            <li>姓名：张三</li>
            <li>年龄：18</li>
            <li>班级：高一(3)班</li>
            <li>学号：20240315</li>
            <li>性别：男</li>
            <li>联系电话：135xxxx6789</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

方案1：固定列数的响应式布局 #

给ul添加row row-cols-1 row-cols-md-2 g-2类，给每个li添加col类，实现移动端1列、桌面端2列的布局：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">学生基本信息</h5>
          <!-- 修改后的ul多列布局 -->
          <ul class="list-unstyled row row-cols-1 row-cols-md-2 g-2">
            <li class="col">姓名：张三</li>
            <li class="col">年龄：18</li>
            <li class="col">班级：高一(3)班</li>
            <li class="col">学号：20240315</li>
            <li class="col">性别：男</li>
            <li class="col">联系电话：135xxxx6789</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：自定义列宽的布局 #

如果需要不同列占据不同宽度，直接给li指定col-*类即可：

<ul class="list-unstyled row g-2">
  <li class="col-6">姓名：张三</li>
  <li class="col-6">年龄：18</li>
  <li class="col-12">班级：高一(3)班</li> <!-- 占满整行 -->
  <li class="col-4">学号：20240315</li>
  <li class="col-4">性别：男</li>
  <li class="col-4">联系电话：135xxxx6789</li>
</ul>

关键说明 #

• row：将ul转为Bootstrap的网格行容器，确保内部col能正常布局
• row-cols-*：控制每行显示的列数，row-cols-1表示每行1列，row-cols-md-2表示屏幕≥768px时每行2列
• g-2：设置列之间的间距，数值可选g-0到g-5，按需调整
• 嵌套逻辑：父级col（示例中的col-md-8）内直接使用row/col类，无需额外嵌套外层容器，Bootstrap会自动处理内边距和间距

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee