Bootstrap的最佳做法是什么？

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

更新 ：这不是一个“主要基于意见”的问题，因为根据我在哪里应用样式，在涉及响应方面时，它可能会破坏预期的行为。 达伍德·阿万（Dawood Awan）的答案是该问题合法性及其与意见无关的一个完美示例。

Answer 1

引导规则：

行和列交替使用
行的边距为负，以确保列遵守容器的宽度。

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

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