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个cols 请帮帮我......

编辑：您可以查看此示例
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);
}

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

1. 将默认填充更改为0px。这可能会导致更大的问题，因为它会影响您的所有列布局。
2. 针对此特定面板（例如#stats > .panel.col-md-6）创建一些自定义CSS布局代码。我在下面提供了一个例子。
＆＃13;
＆＃13;
#stats > .panel.col-md-6 {
  padding-left: 0;
  padding-right: 0;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

但我根本无法乘坐排水沟或面板之间的空间。