为什么引导列之间的填充会丢失答案

【问题标题】：Why is the padding between the bootstrap columns getting lost为什么引导列之间的填充会丢失
【发布时间】：2017-04-08 19:15:57
【问题描述】：

我对 bootstrap 很陌生，并且一直在努力解决以下问题。每当我使用以下代码时，列之间的填充都会丢失。

<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4 col"></div>
                <div class="col-sm-4 col"></div>
                <div class="col-sm-4 col"></div>
            </div>
        </div>
    </body><!--end body-->

但每当我在列内移动类 col 时，代码就会完全按预期工作。

<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
            </div>
        </div>
    </body><!--end body-->

以下是我正在使用的 CSS 类

<style>
            .col{
                min-height: 500px;
                background-color: gray;
            }
</style>

【问题讨论】：

你能做一个小提琴吗？
什么版本的 Bootstrap？
jsfiddle.net/gv034bgL/5 以上是相同的小提琴链接。 @RehbanKhatri
@ZimSystem bootstrap 3.3.6

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 不会在列之间添加空格，它会在每列内部添加空格。因此，如果您在每列中放置另一个 div，它将提供您想要的空间。

我的看法是，这些列仅充当实际内容的容器，这些内容位于其中。

我认为你应该做的那种事情的jsfiddle：https://jsfiddle.net/bqadptzL/

CSS：

.col {
  /* just to demonstrate */
  background-color: red;      
}

.box {
  background-color:gray;
  min-height: 500px;         
}

HTML：

<body>
      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-4 col">
                <div class="box">
                  Content
                </div>
              </div>
              <div class="col-sm-4 col">
                <div class="box">
                  Content
                </div>
              </div>
              <div class="col-sm-4 col">
                <div class="box">
                  Content
                </div>
              </div>
          </div>
      </div>
</body><!--end body-->

如果您查看网格系统示例，您会发现列之间没有空间，只有在它们内部。 http://getbootstrap.com/css/#grid

希望对您有所帮助。

旁注：您不应该将列放在列中，您应该只将列放在行中。但是您可以将行放在列中。所以你可以交替行 - 列 - 行 - 列，而不是行 - 列 - 列。这就是 Bootstrap 系统的工作方式。

【讨论】：

谢谢，这真的很有帮助
@RushilAhuja 没关系，请检查我刚刚添加的旁注，我认为这也可能有所帮助。

【解决方案2】：

当您使用第二个版本时，您会获得由您添加的 div 创建的边距，如果您向 .col css 类添加边距，您应该会看到差异。 You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue

【讨论】：

引导列没有边距，它们有填充。

【解决方案3】：

内边距不会丢失。在 Bootstrap 中，col-sm-* 有 15px 内边距。请记住，背景颜色会填充整个单元格的宽度，包括内边距。

您将 bg 颜色放在带有填充的列上，而在另一种情况下，它位于没有填充的内列上。

将背景颜色和边框只放在col-sm-4 上。你会看到区别。填充在那里，并且在两种情况下都相同......

http://www.codeply.com/go/lf2V9vlIsr

【讨论】：