Bootstrap 4 不同区块网格列响应式宽度匹配对齐问题

你要实现的布局参考：

宽度不一致的原因 #

Bootstrap 栅格系统的嵌套列宽度是基于父列宽度计算比例的，你在宽度占容器10/12的col-10内定义的col-2，实际仅占父col-10宽度的2/12，而非整个容器宽度的2/12，自然无法和外层的col-2对齐。

解决方法 #

不需要使用嵌套row，将第二区块的所有列放在同一层级的row下，用w-100做行折即可，所有列的宽度比例都基于全局容器计算，天然对齐，完全保留Bootstrap原生响应式特性。

完整可运行代码

.row div {
  border: 1px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <!-- 首行布局 -->
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
  
  <div class="w-100 py-2"></div>

  <!-- 第二区块布局 -->
  <div class="row">
    <div class="col-10">col-10</div>
    <div class="col-2 h-100">col-2</div>
    <!-- 换行分割 -->
    <div class="w-100"></div>
    <div class="col-8">col-8</div>
    <div class="col-2">col-2</div>
  </div>
</div>

该方案没有自定义宽度规则，所有栅格类都是Bootstrap原生提供，响应式表现和原生栅格完全一致，所有col-2宽度完全匹配。

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