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