Question

我知道bootstrap中行/列的“推荐”代码段是：

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

一切都很好 - 填充＆amp;保证金在每个列集中保留。

但是在我的代码中有很多东西，比如：

<div class="row">
   <div class="col-md-12"></div>
</div>

这可以将它合并为一个div吗？我想我可以这样写：

<div class="row col-md-12">
</div>

不幸的是它没有用（正如你所看到的，第3行更短）。我可以做些什么来避免使用col-md-12附加div？

Answer 1

您看到差异的原因是.row定义了margin-left的否定margin-right和-15px，.col-*-*定义了width 100%

Bootstrap的css

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

.col-[rest of class name]{
    width:100%;
}

100%的宽度导致负margin被忽略。如果覆盖负边距，则div的宽度相同。

覆盖bootstrap css

.row{
  margin-left:0px;
  margin-right:0px;
}

虽然我建议坚持使用bootstrap的预期用法，但这可以解决您的width问题。

<强>小提琴