Bootstrap面板在较小尺寸上不需要的左右边距 [英] Bootstrap panel unwanted right and left margins on smaller sizes

问题描述

我使用Bootstrap和以下代码创建了一个面板:

I created a panel using Bootstrap and the codes below:

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

但是在面板标题中，输出在左右之间有一个间隙.

But the output have a gap from left and right in panel heading.

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

If I remove col-md-6, the problem became solved. But I need to have it with 6 cols.
Please help me ...

您可以看一下此示例
http://codepen.io/mbsmt/pen/eNXmoY

You can take a look at this sample
http://codepen.io/mbsmt/pen/eNXmoY

推荐答案

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

You have padding on the left and right because by default Bootstrap adds gutter padding to columns. The gutter width is 15px. Here's the mixin which creates the .col-md- classes:

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

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

To remove the padding, you have two options:

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

1. Change the default padding to 0px. This could cause larger problems though as it will effect all your column layouts.
2. Create some custom CSS layout code targeting this specific panel such as #stats > .panel.col-md-6. I've supplied an example below doing this.

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

这篇关于Bootstrap面板在较小尺寸上不需要的左右边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！