Question

尝试复制Bootstrap列，而不使用html框架附带的所有额外代码。

我之前做过的简单的html和CSS，但对于我的生活，我无法弄清楚为什么这些不会漂浮并且并排坐着。

两列50％宽度和15px填充，父div称为'row'，边距为-15px，容器为15px。为什么我不能让这个工作？

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;
}

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

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

Answer 2

这是你在找什么？

https://jsfiddle.net/5wc53zkz/

更新

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

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

2 个答案: