**

Bootstrap栅格布局的理解

**

刚开始了解bootstrap的栅格布局有点乱,并且也理解错了。
正如col-xs-2 col-md-4什么的没有正确的认识。

今天重新学习了下发现其实太tm简单的原理,好多地方的教程应该是说得太复杂了

插入官方的解释:

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

这里最重要还是这句话:栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

用以下实例记录:

<div class="container">
    <div class="row">
      <div class="col-xs-4">
        col-xs-4
      </div>
      <div class="col-xs-3">
        col-xs-3
      </div>
      <div class="col-xs-3">
        col-xs-3
      </div>
      <div class="col-xs-2">
        col-xs-2
      </div>
    </div>
  </div>

但实际上是不需要去考虑啥时候用xs 啥时候用md,啥时候用lg
因为这些参数只是个阈值罢了。

回到这句话:总是水平排列,开始是堆叠在一起的,当大于这些阈值时将变为水平排列
也就是比如像上面那样你只设置了xs这个参数,并且只有4个。因为我们知道xs这种类的范围是 小于768像素。但事实它不意味着仅仅小于768的设备才生效! 因为以上代码的显示效果是 无论像素多大多小它都是以水平的形式表现。!
因为栅格系统 是低于设定的阈值才会失去水平的显示效果
如图 都是以水平排列 测试一测试二 测试三
可以用另外的代码看看效果:
<div class="container">
    <div class="row">
      <div class="col-md-4">
        col-md-4
      </div>
      <div class="col-md-3">
        col-md-3
      </div>
      <div class="col-md-3">
        col-md-3
      </div>
      <div class="col-md-2">
        col-md-2
      </div>
    </div>
  </div>

测试4
测试5
可见一旦低于992px就不会水平排列了
那么想要一个div多个不同设备的布局的方法就挺清晰地想到怎么去用了

最后修改:2019 年 08 月 09 日 07 : 50 PM
如果覺得我的文章對你有用,請隨意讚賞