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的行/列布局，所以我感觉肯定有更好的解决方案。

- nanoquack

Answer 1

默认情况下，每一列都有15像素的内边距。这构成了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/上编译自己的网格并选择适合您需要的间距。

- Bass Jobsen