父 div 上具有负边距的 CSS 浮动列正在堆叠答案

【问题标题】：CSS floated columns with negative margin on parent div are stacking父 div 上具有负边距的 CSS 浮动列正在堆叠
【发布时间】：2016-10-06 23:18:26
【问题描述】：

尝试在没有 html 框架附带的所有额外代码的情况下复制 Bootstrap 列。

我以前做过的简单的 html 和 css，但对于我的生活，我无法弄清楚为什么它们不会浮动并并排放置。

两列宽度为 50%，内边距为 15 像素，父 div 称为“行”，边距为 -15 像素，容器为 15 像素。为什么我不能让它工作？

JS Fiddle here

HTML：

<div class="container">

  <div class="form-row row clearfix">   
    <div class="form-group col-sm-6">
      test                                  
    </div>
    <div class="form-group col-sm-6">
      test                                  
    </div>
  </div>

</div>

CSS：

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}
.row {
  margin-left: -15px;
  margin-right: -15px
}
/*COLUMNS*/
@media (min-width: 768px) {
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-12 {
        width: 100%;
    }
}

/*FORM*/
.form-group {
    padding: 0 15px 15px 15px;
    float: left;
    background: blue;
}

【问题讨论】：

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

【解决方案1】：

盒子的内边距增加了它们的宽度。

.form-group {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

这可以防止这种情况发生。

【讨论】：

啊，我觉得我应该知道并看到它！感谢@jay-fridge 指出。

【解决方案2】：

这是你要找的吗？

https://jsfiddle.net/5wc53zkz/

更新

.row, .form-group {
  margin-left: -15px;
  margin-right: -15px
}

【讨论】：

不完全，但差不多。看着getbootstrap.com/css/#grid，他们没有添加负边距，这意味着表单组中的内容应该被填充而不是直接靠在边缘。
@ShambalaG 补充说：引导程序已将 border-box 应用于所有使用 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 的元素...。this 有更多解释...
感谢大家的帮助。现在看起来很明显。