Bootstrap 的最佳实践是什么？

假设您有这个简单的标记。

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

如果我想添加一个margin-top带来h1向下朝向容器的中心（默认情况下它会将自己定位在最顶部），将其应用到h1, .row or .col-md-12 ?

例如：

.row {
 margin-top: 100px;
}

Update： 这是NOT这是一个“主要基于意见”的问题，因为根据我应用该风格的位置，当涉及到事物的响应方面时，它可能会破坏预期的行为。达乌德·阿万（Dawood Awan）的回答是这个问题合理性的完美例子，并且它与观点无关。

引导规则：

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

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>