Bootstrap 3.x中水平排列的两个Panel无间距问题求助

这是个很常见的Bootstrap布局小坑，原因在于你把列类（col-md-6）直接套在了.panel元素上——Bootstrap的列是靠内边距（padding）来控制间距的，但当列类和面板合并时，面板的边框会延伸到列的内边距区域，视觉上两个面板就紧紧挨在一起，看不到预期的间距了。

下面给你几种简单靠谱的解决方法：

方法1：用列容器包裹面板（最推荐） #

把col-md-6作为外层容器，内部放置.panel，这样列的内边距会自然形成面板之间的间距，同时完美贴合Bootstrap的网格布局规则：

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Heading</div>
      <div class="panel-body"> Something ... </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Heading</div>
      <div class="panel-body"> Something ... </div>
    </div>
  </div>
</div>

小提示：一定要在外层加上.row，它的负外边距能抵消列的内边距，避免整体布局出现水平滚动条或错位。

方法2：自定义面板间距类 #

如果不想调整HTML结构，可以给面板加个自定义的外边距类，手动控制间距：

先在CSS里添加样式：

/* 给面板添加左右间距，底部保持和默认.panel一致的间距 */
.panel-spacing {
  margin: 0 15px 15px;
}

/* 中等屏幕及以上，去掉最后一个面板的右边距，防止超出容器 */
@media (min-width: 992px) {
  .col-md-6:last-child .panel-spacing {
    margin-right: 0;
  }
}

然后修改HTML：

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default panel-spacing">
      <div class="panel-heading">Heading</div>
      <div class="panel-body"> Something ... </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default panel-spacing">
      <div class="panel-heading">Heading</div>
      <div class="panel-body"> Something ... </div>
    </div>
  </div>
</div>

方法3：临时调整列的内边距（不推荐） #

你也可以直接给列加额外的内边距，但这种方法会破坏Bootstrap网格系统的一致性，容易引发其他布局问题，所以仅作为临时应急方案：

<div class="row">
  <div class="col-md-6" style="padding-right: 20px;">
    <div class="panel panel-default">
      <!-- 面板内容 -->
    </div>
  </div>
  <div class="col-md-6" style="padding-left: 20px;">
    <div class="panel panel-default">
      <!-- 面板内容 -->
    </div>
  </div>
</div>

总结一下，最稳妥的是方法1，它完全遵循Bootstrap的设计逻辑，不需要额外CSS，也不容易踩坑。

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