Bootstrap 3布局异常：pull-right类元素溢出row问题求助

嘿，我之前也碰到过类似的Bootstrap 3栅格溢出问题，给你几个实用的排查和解决思路：

1. 解决列内边距与按钮尺寸的冲突 #

Bootstrap的.col-xs-*默认带有左右各15px的内边距，而btn-link按钮加上Font Awesome图标后，整体尺寸可能刚好超出了.col-xs-1的可用宽度（毕竟xs下每列宽度本来就很窄）。你可以给这两个操作列加个自定义类，缩小内边距：

.btn-col {
  padding-left: 5px;
  padding-right: 5px;
}

然后把列的代码改成：

<div class="col-xs-1 btn-col">
  <button class="btn btn-link"><i class="fa fa-trash"></i></button>
</div>

2. 压缩按钮的内外边距 #

btn-link默认带有一定的padding，你可以自定义按钮样式，进一步缩小它的整体尺寸：

.action-btn {
  padding: 0 4px;
  margin: 0;
  white-space: nowrap; /* 防止图标换行撑宽 */
}

给按钮加上这个类：

<button class="btn btn-link action-btn"><i class="fa fa-save"></i></button>

3. 排查额外的自定义样式冲突 #

检查一下你自己写的CSS里，有没有给.row加过左右margin，或者给.col-xs-1加过固定width、额外的margin属性——这些都会打破Bootstrap栅格的border-box布局逻辑，导致列溢出。

完整示例代码 #

把上面的调整整合起来，大概是这样：

<div class="row">
  <div class="col-xs-1 btn-col">
    <button class="btn btn-link action-btn"><i class="fa fa-trash"></i></button>
  </div>
  <div class="col-xs-10">
    <!-- 中间内容区域 -->
  </div>
  <div class="col-xs-1 btn-col">
    <button class="btn btn-link action-btn"><i class="fa fa-save"></i></button>
  </div>
</div>

<style>
.btn-col {
  padding-left: 5px;
  padding-right: 5px;
}
.action-btn {
  padding: 0 4px;
  margin: 0;
  white-space: nowrap;
  max-width: 100%; /* 强制按钮不超出列宽 */
}
</style>

核心逻辑就是：Bootstrap 3的栅格列宽度是包含内边距的，只要按钮的「内容+padding+margin」总和不超过列的可用宽度（列宽-左右padding），就不会出现溢出问题啦。

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