Bootstrap3中绝对定位按钮下移后col-sm-6左移问题求解

这个问题的核心是绝对定位的元素会脱离文档流，所以你的col-sm-6没有考虑按钮的占位，才会出现偏移。下面给你两种实用的解决方案，都是基于Bootstrap 3的布局逻辑来调整的：

方法一：让按钮相对于col-sm-6定位（适合按钮属于该列内容的场景） #

把按钮放在col-sm-6内部，同时给这个列设置相对定位，这样按钮的绝对定位会被约束在列的范围内，不会影响列本身的布局：

<div class="row">
  <div class="col-sm-6" style="position: relative; padding-bottom: 50px;">
    <!-- 这里放你的列内容 -->
    <p>这是col-sm-6里的内容...</p>
    
    <!-- 加号按钮 -->
    <button class="btn btn-primary" style="position: absolute; bottom: 10px; right: 10px;">+</button>
  </div>
</div>

• position: relative：给col-sm-6设置相对定位，作为按钮的定位参考容器。
• padding-bottom: 50px：给列底部留出足够空间，避免按钮覆盖列内的内容（数值可以根据按钮高度调整）。
• 按钮的bottom和right属性：控制按钮在列内的底部位置，你可以根据需求调整像素值。

方法二：让按钮相对于父容器定位（适合按钮属于整个区块底部的场景） #

如果按钮是属于整个页面/区块的底部，而不是某个列的内容，可以给按钮的父容器（比如container或自定义的包裹div）设置相对定位，这样按钮会固定在父容器的底部，完全不会影响col-sm-6的布局：

<div class="container" style="position: relative; min-height: 400px;">
  <div class="row">
    <div class="col-sm-6">
      <!-- 这里放你的列内容 -->
      <p>这是col-sm-6里的内容...</p>
    </div>
  </div>
  
  <!-- 加号按钮 -->
  <button class="btn btn-primary" style="position: absolute; bottom: 20px; right: 20px;">+</button>
</div>

• position: relative：让容器成为按钮的定位参考。
• min-height: 400px：确保容器有足够的高度，让按钮能显示在底部（如果容器内内容足够高，可以省略这个属性）。
• 按钮的定位属性：同样通过bottom和right调整位置，不会干扰col-sm-6的栅格布局。

这两种方法都能解决你遇到的偏移问题，你可以根据按钮的实际归属场景选择合适的方案~

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