Bootstrap中container-fluid的row元素忽略父容器padding问题求助

问题原因 #

这个是Bootstrap栅格系统的预设样式导致的正常表现：

• Bootstrap 所有.row类默认自带margin-left: -15px、margin-right: -15px的负边距配置，设计初衷是抵消.container/.container-fluid默认的15px左右内边距，让栅格内第一列和最后一列的内容边缘和容器边缘对齐。
• 你自定义了.container-fluid的padding为3%，但.row的负边距还是默认的固定值，就会出现row突破容器padding范围的视觉效果，看起来就像忽略了你设置的padding属性。

解决建议 #

可以根据你的使用场景选择对应方案：

• 方案1：重置当前.row的负边距
  给你的.row添加样式取消默认负边距即可，如果你担心影响全局的row样式，可以给当前row加自定义类名做针对性配置：

  .row {
    height: 50px;
    border: solid 1px black;
    margin-left: 0;
    margin-right: 0;
  }
  

• 方案2：同步调整.row的负边距数值
  如果你需要保留Bootstrap栅格原本的列对齐逻辑，可以将.row的负边距设置为和.container-fluid的padding一致的数值：

  .row {
    height: 50px;
    border: solid 1px black;
    margin-left: -3%;
    margin-right: -3%;
  }
  

• 方案3：新增中间层承载padding
  如果你不想修改Bootstrap原生类的默认样式，可以在container-fluid和row之间加一层自定义容器，把padding写在这个中间层上：

  <div class="container-fluid">
    <div class="custom-wrapper">
      <div class="row">
        <div class="col-sm"></div>
      </div>
    </div>
  </div>
  

  .custom-wrapper {
    padding: 3%;
  }
  

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