Bootstrap 3.3.7嵌套网格列宽不一致问题解决咨询

这个问题的核心是Bootstrap 3网格系统的嵌套列宽度计算逻辑：嵌套在父列中的row和col-*类，是基于父列的宽度来划分12份的，而不是整个页面容器。

举个例子：你的父组件里col-md-9占了整个容器宽度的9/12，嵌套在它里面的col-md-1只会占这个col-md-9宽度的1/12，自然比父网格里直接的col-md-1（占整个容器的1/12）要窄。

要让嵌套列的宽度和父网格的列宽保持一致，这里有两种可行的解决方法：

方法1：自定义匹配宽度的列类 #

我们需要让嵌套列的宽度等于父网格col-md-1的宽度，也就是整个容器的1/12。因为父列col-md-9占容器的9/12，所以嵌套列需要占父列的 (1/12)/(9/12) = 1/9 ≈11.111%。

添加自定义CSS类：

/* 匹配父网格col-md-1宽度的自定义列类 */
.col-md-1-equal {
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  width: 11.11111111%; /* 1/9的精确宽度 */
}

然后修改嵌套组件的代码，把col-md-1替换成这个自定义类：

<div class="row">
  <div class="col-md-1-equal border">.col-md-1 (和父网格同宽)</div>
  <div class="col-md-3 border">.col-md-3</div>
  <div class="col-md-4 border">.col-md-4</div>
  <div class="col-md-4 border">.col-md-4</div>
</div>

方法2：规范父容器结构（辅助优化） #

另外，建议把父组件最外层的div替换成Bootstrap的容器类，这样整个网格的内外边距会更规范，避免布局偏移：

<div class="container"> <!-- 用container或container-fluid替换普通div -->
  <div class="row">
    <div class="col-md-3 border">.col-md-3</div>
    <div class="col-md-9 border">
      <nested-app></nested-app>
    </div>
  </div>
</div>

这样调整后，嵌套组件里的列就能和父网格的对应列保持一致宽度了。

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