Question

让我们说你有这个简单的标记。

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

如果我希望添加margin-top以将h1向下移向容器的中心（默认情况下它会自动定位在最顶层），将它应用到h1，.row或.col-md-12会不会更好？

例如：

.row {
 margin-top: 100px;
}

更新：这是不 a＆＃39;主要基于意见的＆＃39;问题，因为取决于我应用风格的位置，它可以打破事物响应方面的预期行为。 Dawood Awan的回答是这个问题合法性的一个完美例子，以及它与意见的关系。

Answer 1

Bootstrap规则：

交替使用行和列
行具有负边距以确保列尊重容器宽度。

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

始终在列上包含col-xs- * 这是为了防止浮动问题。如果你的列应该是12宽，不管怎么说都不要忽略col-xs-12

<div class="row">
  <div class="col-xs-12 col-md-6">
      Some stuff
  </div>
</div>

首先移动
从最小的屏幕尺寸开始。从xs＆lt; sm＆lt; md＆lt; lg，你应该都很好！

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      Some stuff
  </div>
</div>

小列用作较大的列
如果没有另外指定，sm列也可以用作md列。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
      This is the same
  </div>

  <div class="col-xs-12 col-sm-6">
      as this one
  </div>
</div>

最后： 不要设置行和列的样式！
随意添加类来修改它们，但不要以任何方式覆盖它们！

错误示例：

.row {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row">
  <div class="col-xs-12">
    This is a no-go!
  </div>
</div>

好榜样

.pink-bordered {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row pink-bordered">
  <div class="col-xs-12">
    Totally fine
  </div>
</div>

Bootstrap的最佳实践是什么？

1 个答案:

Bootstrap规则：