如何解决使用Bootstrap实现简单网格布局时效果不符的问题

问题原因 #

你当前的代码存在两处核心问题：

• 用作换行分隔的w-1类宽度仅为0.25rem，无法占满整行实现强制换行的效果
• 默认的col类会平分行内空间，导致左右两列宽度一致，不符合左窄右宽的布局预期

调整方案 #

将代码修改为如下内容即可实现目标布局：

<td>
  <div class="row g-3">
    <!-- 第一行内容 -->
    <div class="col-auto">Male, Arabic, TV advertisement</div>
    <div class="col">Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description</div>
    <!-- 强制换行 -->
    <div class="w-100"></div>
    <!-- 第二行内容 -->
    <div class="col-auto">Male, Arabic, TV advertisement</div>
    <div class="col">Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description</div>
  </div>
</td>

调整说明 #

1. 把原来的w-1替换为w-100：w-100是Bootstrap内置的100%宽度工具类，插入后可以强制后续列换到新行展示
2. 左侧列从col改为col-auto：该类会让列宽根据内部内容自动适配，剩下的空间全部留给右侧的col列，自然实现左窄右宽的效果，且两行左侧列内容一致，宽度会自动对齐
3. 新增的g-3是栅格间距工具类，用来控制左右列之间的间距，可根据需求替换为g-1/g-2/g-4调整间距大小

内容的提问来源于stack exchange，提问作者johnnasx