twitter-bootstrap Bootstrap 面板在较小尺寸上不需要左右边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31885148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap panel unwanted right and left margins on smaller sizes
提问by Mohammad Saberi
I created a panel using Bootstrap and the codes below:
我使用 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>
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 ...
如果我删除col-md-6，问题就解决了。但我需要有 6 列。
请帮我 ...
Edit: You can take a look at this sample
http://codepen.io/mbsmt/pen/eNXmoY
编辑：您可以查看此示例
http://codepen.io/mbsmt/pen/eNXmoY
回答by Hynes
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:
您在左侧和右侧都有填充，因为默认情况下 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);
}
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.
- 将默认填充更改为 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>回答by Becca
You can also just wrap the panel in a div with the column classes, separate from the panel classes. It would look like this:
您也可以将面板包装在带有列类的 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>
回答by David Ng
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.
但我根本无法驾驭排水沟或面板之间的空间。
