使用Bootstrap的最佳实践是什么？ [英] What's the best practice for this with Bootstrap?

问题描述

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

Let's say you have this simple markup.

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

If I wished to add a margin-top to bring the h1 down towards the center of the container (it will position it self at the very top by default), would it be better to apply this onto the h1, .row or .col-md-12 ?

例如：

.row {
 margin-top: 100px;
}

更新：这是 / strong>一个'主要基于意见的'问题，因为根据我应用的风格，它可能打破预期的行为，当涉及到事情的敏感方面。

Update: This is NOT a 'primarily opinion-based' question since depending on where I applied the style, it could break the expected behavior when it comes to the responsive side of things. Dawood Awan's answer is a perfect example of the legitimacy of this question and how it is not about opinion.

推荐答案

Bootstrap的规则：

交替使用行和列

行具有负边距，以确保列符合容器宽度。 / p>

Rules to Bootstrap:

Use rows and columns alternating
Rows have a negative margin to ensure that the columns respect the containers width.

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

---

始终包含col-xs- *列

这是为了防止浮动问题。如果你的列应该是12宽反正不要忽略col-xs-12

---

Always include col-xs-* on columns
This is to prevent floating issues. If your column is supposed to be 12 wide anyways dont just ignore the col-xs-12

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

---

首先移动 br>
从最小的屏幕开始。从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>

Small columns serve as larger columns 

A sm column does serve as a md column as well, if not specified otherwise.

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

---

最后：
不要为行和列设置样式！

随意添加类以修改它们，但不要以任何方式覆盖它们。

---

And at last: Do not style rows and columns!
Feel free to add classes to modify them, but do not override them in any way!

错误示例：

.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的最佳实践是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！