Bootstrap的最佳做法是什么?

阿什莉·布朗(Ashley Brown)

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

<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)的答案是该问题正当性及其与意见无关的一个完美示例。

亚历克斯

引导规则:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

IE特定CSS的最佳做法是什么?

来自分类Dev

更改活动时的最佳做法是什么?

来自分类Dev

获得Looper的最佳做法是什么?

来自分类Dev

(在表格中搜索)最佳做法是什么?

来自分类Dev

在Webapp项目中包含Bootstrap资源的一般最佳做法是什么?

来自分类Dev

Django中的复选框-最佳做法是什么?

来自分类Dev

设置图像尺寸的最佳做法是什么?CSS或属性?

来自分类Dev

Javascript:从函数返回值的最佳方法/做法是什么?

来自分类Dev

比较JavaScript中的值的最佳做法是什么?

来自分类Dev

合并两张地图的最佳做法是什么

来自分类Dev

域名(开发,登台,生产)的最佳做法是什么?

来自分类Dev

应用程序文档的最佳做法是什么?

来自分类Dev

该IF循环应被视为最佳做法是什么?

来自分类Dev

Django模型字段选择的最佳做法是什么?

来自分类Dev

在iOS中清除缓存目录的最佳做法是什么?

来自分类Dev

SQLAlchemy中查找值的最佳做法是什么?

来自分类Dev

在Django中保存机密文件的最佳做法是什么?

来自分类Dev

在GRPC上打开渠道的最佳做法是什么?

来自分类Dev

在Android中执行网络操作的最佳做法是什么?

来自分类Dev

Struts 2和Hibernate-最佳做法是什么?

来自分类Dev

编写li标签时的最佳做法是什么

来自分类Dev

最佳做法是什么?撰写n个项目行

来自分类Dev

在页面中包含CSS和JavaScript的最佳做法是什么?

来自分类Dev

在 JHipster 中保存初始数据的最佳做法是什么?

来自分类Dev

更改加密列属性的最佳做法是什么

来自分类Dev

设置 X 射线守护程序的最佳做法是什么?

来自分类Dev

修补完整数据列的最佳做法是什么?

来自分类Dev

什么是AJAX最佳做法?

来自分类Dev

Rails:lambda,范围和类方法之间有什么区别?最佳做法是什么?

Related 相关文章

  1. 1

    IE特定CSS的最佳做法是什么?

  2. 2

    更改活动时的最佳做法是什么?

  3. 3

    获得Looper的最佳做法是什么?

  4. 4

    (在表格中搜索)最佳做法是什么?

  5. 5

    在Webapp项目中包含Bootstrap资源的一般最佳做法是什么?

  6. 6

    Django中的复选框-最佳做法是什么?

  7. 7

    设置图像尺寸的最佳做法是什么?CSS或属性?

  8. 8

    Javascript:从函数返回值的最佳方法/做法是什么?

  9. 9

    比较JavaScript中的值的最佳做法是什么?

  10. 10

    合并两张地图的最佳做法是什么

  11. 11

    域名(开发,登台,生产)的最佳做法是什么?

  12. 12

    应用程序文档的最佳做法是什么?

  13. 13

    该IF循环应被视为最佳做法是什么?

  14. 14

    Django模型字段选择的最佳做法是什么?

  15. 15

    在iOS中清除缓存目录的最佳做法是什么?

  16. 16

    SQLAlchemy中查找值的最佳做法是什么?

  17. 17

    在Django中保存机密文件的最佳做法是什么?

  18. 18

    在GRPC上打开渠道的最佳做法是什么?

  19. 19

    在Android中执行网络操作的最佳做法是什么?

  20. 20

    Struts 2和Hibernate-最佳做法是什么?

  21. 21

    编写li标签时的最佳做法是什么

  22. 22

    最佳做法是什么?撰写n个项目行

  23. 23

    在页面中包含CSS和JavaScript的最佳做法是什么?

  24. 24

    在 JHipster 中保存初始数据的最佳做法是什么?

  25. 25

    更改加密列属性的最佳做法是什么

  26. 26

    设置 X 射线守护程序的最佳做法是什么?

  27. 27

    修补完整数据列的最佳做法是什么?

  28. 28

    什么是AJAX最佳做法?

  29. 29

    Rails:lambda,范围和类方法之间有什么区别?最佳做法是什么?

热门标签

归档