引导程序 3：缺少排水沟答案

【问题标题】：Bootstrap 3: Missing gutters引导程序 3：缺少排水沟
【发布时间】：2013-08-06 22:06:28
【问题描述】：

刚开始使用 bootstrap 3，我无法让列之间的排水沟正常工作。

我创建了最基本的代码来测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js">                                                                                                                                  </script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <style>
        .box1 {
            background-color: green;
        }
        .box2 {
            background-color: blue;
        }
    </style>
</head>
<div class="container">
    <div class="row">
        <div class="col-lg-4 box1">
            <h1>Test</h1>
        </div>
        <div class="col-lg-8 box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>
</html>

结果只是一个大的绿色/蓝色框，两列之间没有任何排水沟。我也在小提琴上尝试过，但没有运气http://jsfiddle.net/Tgkkb/ 我错过了什么？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 3 切换到使用padding 代替margins。所以，内容是分开的，但盒子没有。 background-color 也将填充 padding。

不过，你应该可以通过设置内盒的背景来获得想要的效果：

<div class="row">
    <div class="col-sm-4">
        <div class="box1">
            <h1>Test</h1>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>

http://jsfiddle.net/PFxUk/

不过，目标只是应用 background to a single, wrapping child。所以，如果标题肯定没有任何兄弟姐妹，那么你可以放弃额外的<div>s：

<div class="row">
    <div class="col-sm-4">
        <h1 class="box1">Test</h1>
    </div>
    <div class="col-sm-8">
        <h1 class="box2">Test2</h1>
    </div>
</div>

http://jsfiddle.net/G2gbG/

【讨论】：

你是一个救命稻草...作为一个相当有经验的开发人员，我已经为此感到沮丧了几个小时...呃..您知道它在文档中的什么地方吗？到目前为止，他们似乎很糟糕。再次感谢。
@bcoop713 我没有看到文档中提到 3.0 的变化——它们是用“忘记 Bootstrap 2”的语气写的。但是，在“网格系统”下的Bootstrap 3 Pull Request（链接在release announcement）中提到了“新的单一网格系统”。
@JonathanLonowski - 这个答案是正确的，因此我赞成，但你知道有一种方法可以删除这些额外的 div（box1 等），同时仍然允许排水沟出现吗？我有一个具有 col-sm-2 等的 li 列表，因此您的解决方案意味着我在这些 li 中包含额外的 div，但这意味着要转移所有内容，并且会严重干扰现有的 jQuery 和 CSS。
@DeeMac 我添加了一个可能有帮助的替代示例。但是，如果<li>s 已经有一个孩子，例如包装其他内容的<a>，您可以对其应用background（可能需要display: block 或display: inline-block）。否则，如果IE9+ support 足够，您可以将background 和background-clip: content-box 应用于<li>s。
我真的不喜欢这个解决方案中的排版与边缘相悖。换句话说，它比创建排水沟做得更多。有什么办法吗？

【解决方案2】：

如果您想为列设置内边距或边距，您可以使用行上的 row-no-gutters 类（在 v3.4.0 中引入）并添加您自己的内边距和背景。

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

【讨论】：