将行设为一列

Question

我知道 bootstrap 中行/列的 "recommended" 片段是：

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

一切都很好 - 每个列集中都保留了填充和边距。

但是在我的代码中有很多这样的东西：

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

是否可以将其合并为一个div？我想我可以这样写：

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

不幸的是，它不起作用（如您所见，第 3 行较短）。我能做些什么来避免额外的 div 和 col-md-12?

Answer 1

您看到差异的原因是因为 .row 定义了 -15px 的负值 margin-left 和 margin-right，而 .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 问题。

Fiddle

https://jsfiddle.net/DTcHh/15539/

Make row as one column