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

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

我以前做过简单的html和css，但就我的一生而言，我不明白为什么它们不能并排浮动

两列具有50%宽度和15px填充，父div称为“row”，边距为-15px，容器为15px。为什么我不能让它工作

HTML:

---

这就是你要找的吗

更新

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

---

盒子的填充物增加了它们的宽度

.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+ */
}

---

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

不完全是，但几乎是。看着他们没有添加负边距，这意味着表单组中的内容应该被填充，而不是直接与边缘对接。@ShambalaG添加到：引导程序使用

*{-webkit-box-sizing:border-box；-moz-box-sizing:border-box；box-sizing:border-box；}为所有元素应用了
border-box

。。。。有更多的解释…谢谢大家的帮助。现在似乎很明显。啊，我觉得我应该知道这一点，并看到它！谢谢@jay fridge指出这一点。

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

.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+ */
}