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>