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。这是创建 .col-md- 类:

的 mixin

// 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);
}

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

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<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>

Answer 2

您也可以只将面板包裹在 div 中，其中列类，与面板类分开。它看起来像这样：

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

Answer 3

一个简单的样式可以像这样完成删除填充的工作

<div style="padding:0" class="panel-heading preview" >

但我根本无法驾驭排水沟，或者面板之间的 space。

Bootstrap 在较小的尺寸上设置不需要的左右边距

Bootstrap panel unwanted right and left margins on smaller sizes

twitter-bootstrap

panel

margin