Bootstrap panel unwanted right and left margins on smaller sizes

问题

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.

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

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

回答1:

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:

Change the default padding to 0px. This could cause larger problems though as it will effect all your column layouts.
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>

回答2:

You can also just wrap the panel in a div with the column classes, separate from the panel classes. It would look like this:

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

回答3:

A simple style could do the job of remove the padding like this

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

But I simply can't get ride the gutter, or the space between panels.

来源：https://stackoverflow.com/questions/31885148/bootstrap-panel-unwanted-right-and-left-margins-on-smaller-sizes

标签

twitter-bootstrap

panel

margin