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

更新:这不是“主要基于意见”的问题，因为根据我应用样式的位置，它可能会破坏预期的行为事物的 react 方面。 Dawood Awan 的回答完美地说明了这个问题的合理性以及它如何与观点无关。

Answer 1

Bootstrap 规则:

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

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

---

始终在列上包含 col-xs-*
这是为了防止 float 问题。如果您的列应该是 12 宽无论如何不要忽略 col-xs-12

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

---

移动优先
从最小的屏幕尺寸开始。从 xs < sm < md < 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>