Bootstrap 面板在较小尺寸上出现不需要的左右边距

Question

我使用 Bootstrap 创建了一个面板，代码如下：

<section class="container-fluid" id="stats">
<div class="panel panel-default col-md-6">
    <div class="panel-heading">
        <i class="fa fa-bar-chart fa-lg"></i>
        <strong>Statistics</strong>
    </div>
    <div class="panel-body">
        Something ...
    </div>
</div>
</section>

但输出在面板标题中左右有间隙。

如果我删除col-md-6，问题就解决了。但我需要有 6 列。
请帮我 ...

编辑：您可以查看此示例
http://codepen.io/mbsmt/pen/eNXmoY

Answer 1

左侧和右侧都有填充，因为默认情况下 Bootstrap 会向列添加装订线填充。装订线宽度为15px。这是创建类的 mixin .col-md-：

// Located within less/variables.less
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;

// Located within less/mixins/grid.less
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

要删除填充，您有两种选择：

1. 将默认内边距更改为 0px。但这可能会导致更大的问题，因为它会影响所有列布局。
2. 创建一些针对此特定面板的自定义 CSS 布局代码，例如#stats > .panel.col-md-6. 我在下面提供了一个执行此操作的示例。

// Located within less/variables.less
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;

// Located within less/mixins/grid.less
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

#stats > .panel.col-md-6 {
  padding-left: 0;
  padding-right: 0;
}