关于col-push-md-6与col-pull-md-6重叠及行边距问题的技术咨询

看起来你碰到了Bootstrap（结合Visual Composer）布局里的两个典型问题：行两侧的莫名边距，还有推拉列的重叠情况。我来帮你拆解一下问题根源，再给出具体的修复方案：

问题根源分析 #

1. 硬编码行样式破坏原生布局
   你代码里的行元素加了margin-left: -90px; width: 1068px;这种固定数值的样式，这完全违背了Bootstrap响应式布局的逻辑——Bootstrap的row类本身就自带负margin来抵消列的padding，硬塞固定宽度和margin会直接导致布局错位，出现两侧边距的问题。

2. 列的额外padding导致推拉重叠
   第一个列有padding-8-percent的自定义类，加上Bootstrap原生列的padding，会让列的实际宽度超过50%（因为col-sm-6设置的是50%宽度）。当你用col-md-push-6和col-md-pull-6进行推拉时，总宽度就会超出容器，自然就出现重叠了。

具体修复步骤 #

1. 移除行的硬编码样式 #

把行元素里的margin-left: -90px; width: 1068px;删掉，让Bootstrap的原生row类来控制宽度和margin。修改后的行代码应该是这样：

<div id="fws_5c424b55ca4df" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row full-width-content vc_row-o-full-height vc_row-o-columns-stretch vc_row-o-equal-height vc_row-flex vc_row-o-content-middle standard_section vertically-align-columns " style="padding-top: 0px; padding-bottom: 0px; left: 0px; visibility: visible; min-height: 1226px;">

2. 调整列的padding到内部容器 #

把列的padding-8-percent类移到列内的vc_column-inner或者wpb_wrapper上，不要直接加在列本身上。这样既保留了你想要的内边距效果，又不会影响列的宽度计算。比如修改第一个列的代码：

<div class="vc_col-sm-6 vc_col-md-push-6 wpb_column column_container vc_column_container col instance-12" data-using-bg="true" data-t-w-inherits="default" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="true" data-bg-color="#0f5a99" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
  <div class="column-bg-overlay" style="opacity: 1; background-color: #0f5a99;"></div> 
  <div class="vc_column-inner padding-8-percent"> <!-- 把padding类移到这里 -->
    <div class="wpb_wrapper">
      <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
          <h6 style="padding-bottom: 8px; color: #b1dbff;">METHODOLOGY</h6> 
          Text here.... 
        </div>
      </div>
    </div>
  </div>
</div>

3. 验证推拉类的兼容性 #

确认你使用的是Bootstrap 3.x版本（因为col-md-push-6/col-md-pull-6是Bootstrap 3的语法，Bootstrap 4已经改用order-*和offset-*类了）。如果是Bootstrap 4，需要把推拉类换成对应的新语法，比如用order-md-2和order-md-1来实现列的顺序调换。

4. 用开发者工具调试 #

打开浏览器的开发者工具（F12），选中行和列元素，查看它们的box模型（margin、padding、width的计算值），确认列的总宽度加上偏移量刚好等于行的宽度，没有超出的情况。这能帮你快速定位剩余的布局问题。

总结 #

核心问题就是硬编码的行样式破坏了Bootstrap的原生布局机制，再加上列的额外padding导致宽度计算错误。按照上面的步骤修复后，应该就能解决边距和重叠的问题啦。

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