在Angular HTML中如何合并指定Bootstrap子列与主列？

原布局结构拆解 #

你的原Bootstrap栅格结构大概如下（简化版）：

<div class="row">
  <!-- 第一主列 -->
  <div class="col-md-6">第一列内容</div>
  <!-- 第二主列：嵌套两个子列 -->
  <div class="col-md-1">
    <div class="row">
      <div class="col-md-6">第二列第一个子列内容</div>
      <div class="col-md-6">第二列第二个子列内容</div>
    </div>
  </div>
  <!-- 第三主列 -->
  <div class="col-md-5">第三列内容</div>
</div>

问题出在col-md-1本身宽度有限，嵌套的两个col-md-6子列会进一步拆分这个窄空间，同时第二主列和第三主列之间的栅格间隙放大了布局的松散感。

调整方案：合并目标列并重构栅格 #

核心思路是把第二主列的第二个子列内容移到第三主列中，同时调整第二主列的内部结构，让它只承载第一个子列，具体实现有两种方式：

方式1：保持固定栅格宽度（适配原布局比例）

直接重构列结构，将原第二列第二个子列的内容并入第三主列，同时修改第二主列的内部嵌套为占满整列：

<div class="row">
  <div class="col-md-6">第一列内容</div>
  <!-- 第二主列：仅保留第一个子列，内部子列占满整行 -->
  <div class="col-md-1">
    <div class="row">
      <div class="col-12">第二列第一个子列内容</div>
    </div>
  </div>
  <!-- 第三主列：合并原第二列第二个子列内容 -->
  <div class="col-md-5">
    <!-- 原第二列第二个子列内容 -->
    <div class="your-sub-column-class">第二列第二个子列内容</div>
    <!-- 原第三主列内容 -->
    <div class="your-main-column-class">第三列内容</div>
  </div>
</div>

这种方式保持了原6+1+5的12栅格比例，同时消除了原第二主列和第三主列之间的间隙，因为两个列的内容现在处于同一个栅格列中。

方式2：自适应宽度（更紧凑的布局）

如果不需要严格固定第二主列的宽度，可以用col-md-auto让第二主列自适应内容宽度，剩余空间全部交给合并后的第三主列，进一步减少冗余间隙：

<div class="row">
  <div class="col-md-6">第一列内容</div>
  <!-- 自适应宽度的第二主列 -->
  <div class="col-md-auto">
    <div class="row">
      <div class="col-12">第二列第一个子列内容</div>
    </div>
  </div>
  <!-- 占满剩余空间的合并列 -->
  <div class="col">
    <div class="your-sub-column-class">第二列第二个子列内容</div>
    <div class="your-main-column-class">第三列内容</div>
  </div>
</div>

适配Angular/Angular Material的注意事项 #

如果你的项目同时使用了Angular Material的布局组件（如mat-grid-list或mat-card），只需将上述Bootstrap栅格的调整逻辑对应到Material布局中：

• 若用mat-grid-list，则调整mat-grid-tile的colspan属性，把原第二列第二个子列和第三列的colspan合并；
• 若组件嵌套了mat-card，只需调整卡片所在的栅格列归属即可，核心逻辑不变。

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