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/