Twitter Bootstrap 3：小偏移/保证金

Question

我正在使用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>

我想知道，实现这个目标的twitter-bootstrap是什么方式？当然，人们可以定义边距，但这会打破twitter bootstrap的行/列布局，所以我觉得必须有更好的解决方案。

Answer 1

默认情况下，每列的两边都有15px的填充。这构造了15x2 = 30像素的装订线。您可以通过向内容或列添加背景颜色来显示装订线。 要使空间小于col-md-offset-1，您可以使用嵌套。这将创建col-md-offset-1/2的空间。 对于其他解决方案，您可以使用排水沟。因为通过填充来构造装订线，您可以操纵空间（填充）而不会破坏网格。

请参阅下面的一些示例。我在您的代码中添加了一个侧栏，以使网格不会被破坏。

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

您可以编译自己的网格，并选择适合您所需的装订线：http://getbootstrap.com/customize/