两个div之间的小间隙答案

【问题标题】：small gap between two divs两个div之间的小间隙
【发布时间】：2017-04-12 08:15:49
【问题描述】：

我正在使用 Bootstrap 3，但在两个 div 之间产生小间隙时遇到了问题。我已经尝试过偏移，但它仍然无法在这里工作是我的代码

 .box1 {
    background-color:black;
    width:150px;
    height:150px;
    }

 <div class="container">
<div class="row">
    <div class="col-md-1 col-md-offset-0">
        <div class="box1">

        </div>
    </div>
    <div class="col-md-1 col-md-offset-1">

 <div class="box1">

        </div>

    </div>    
</div>
</div>

问题是如果设置第二个 div col-md-offset-0 它会太接近第一个 div，如果我设置为 1 或更高，它会设置非常大的差距。我想要很小的差距

【问题讨论】：

您是否尝试过使用 Bootstrap 提供的 *-sm-*（小型）模组？
是的，但它不适合小屏幕吗？
首先修复 HTML，这不是有效的引导代码。 row 只能在 container 内，col-* 只能在 row 内。
BS 网格系统并非设计为在列之间存在“小间隙”。偏移类仅偏移整个列宽。您应该在您的列内部处理这个 - 让它们尽可能宽且没有间隙，并在内容上使用边距。
@CBroe 你能举个例子吗？

标签： html css twitter-bootstrap

【解决方案1】：

已编辑：

尝试在 col div 上添加带有自定义类名的边距。像这样

<div class="container">
    <div class="row">
        <!-- custom-spacer is a custom class-name. to add extra margin. -->
        <div class="col-md-1 col-md-offset-0 custom-spacer">
            <div class="box1">
            </div>
        </div>
        <div class="col-md-1 col-md-offset-1">
        </div>
    </div>
</div>

<style>
.box1 {
    background-color:black;
    width:150px;
    height:150px;
}
.custom-spacer {
    margin-right: 40px; /* Increase or decrease the margin as required. */
}
</style>

这种方法可能存在一个问题，因为您正在增加装订线大小，您将无法在同一行中创建 12 个列。

【讨论】：

实际上填充不工作不是边距问题。