Html Twitter Bootstrap 3：小偏移/保证金
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18806313/
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
Twitter Bootstrap 3: Small Offset/Margin
提问by nanoquack
I'm using twitter bootstrap 3. What I want is a margin between two divs which is smaller than the grid size (so col-md-offset-* does not work for this).
我正在使用 twitter bootstrap 3。我想要的是两个 div 之间的边距，它小于网格大小（因此 col-md-offset-* 不适用于此）。
<div id="content-row" class="row">
<div class="col-md-offset-2 col-md-2 content">
some content
</div>
<div id="content" class="col-md-offset-1 col-md-5 content">
some other content
</div>
</div>
I was wondering, what's the twitter-bootstrap way to achieve this? Surely, one could just define margins but that would break the row/column layout of twitter bootstrap, so I'm feeling that there must be a better solution.
我想知道，实现这一目标的 twitter-bootstrap 方法是什么？当然，人们可以只定义边距，但这会破坏 twitter bootstrap 的行/列布局，所以我觉得必须有更好的解决方案。
回答by Bass Jobsen
By default every column have a padding of 15px on both sides. This construct a gutter of 15x2=30 pixels. You will make the gutter visible by adding a background color to your content or columns. To make the space smaller than col-md-offset-1 you could use nesting. This will create a space of col-md-offset-1 / 2. For other solution you could use the gutter. Cause the gutter is construct by padding you could manipulate the space (padding) without breaking the grid.
默认情况下，每一列的两边都有 15px 的内边距。这构造了一个 15x2=30 像素的装订线。您将通过向内容或列添加背景颜色来使装订线可见。要使空间小于 col-md-offset-1，您可以使用嵌套。这将创建一个 col-md-offset-1 / 2 空间。对于其他解决方案，您可以使用装订线。因为排水沟是通过填充构建的，您可以在不破坏网格的情况下操纵空间（填充）。
See some examples below. I add a side bar to your code to make visible the grid is not broken.
请参阅下面的一些示例。我在您的代码中添加了一个侧栏，以使网格未损坏可见。
<div class="container">
Your solution:<br>
<div id="content-row" class="row">
<div class="col-md-offset-2 col-md-2 content" style="background-color:green">
some content
</div>
<div id="content" class="col-md-offset-1 col-md-5 content" style="background-color:orange">
some other content
</div>
<div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>
half size with nesting:<br>
<div id="content-row" class="row">
<div class="col-md-offset-2 col-md-2 content" style="background-color:green">
some content
</div>
<div id="content" class="col-md-6 content" style="background-color:orange">
<div class="row">
<div id="content" class="col-md-offset-1 col-md-11 content content" style="background-color:pink">
some other content
</div>
</div>
</div>
<div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>
space of the gutter:<br>
<div id="content-row" class="row">
<div class="col-md-offset-2 col-md-2 content" style="background-color:green">
some content
</div>
<div id="content" class="col-md-6 content" style="background-color:orange">
<div style="background-color:red;">some other content</div>
</div>
<div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>
Manipulated space of the gutter, using padding won't break the grid:<br>
<div id="content-row" class="row">
<div class="col-md-offset-2 col-md-2 content" style="background-color:green">
some content
</div>
<div id="content" class="col-md-6 content" style="background-color:orange; padding-left:1px; padding-right:0">
<div style="background-color:red;">some other content</div>
</div>
<div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>
You could compile your own grid and choose a gutter with which fits you needs on: http://getbootstrap.com/customize/
您可以编译自己的网格并选择适合您需要的排水沟：http: //getbootstrap.com/customize/
