about 1 year ago

在复习Rails101~4-2 实作讨论群“新增”功能~step2的时候,
教程效果是新增页面居中显示,而我的是居左显示,于是看了英文教程:
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
在"Triy it yourself"中有一句Resize the browser window to see the effect
调整拉大浏览器窗口后就显示居中了,确实是自适应哈!

使用bootstrap可以在不同屏幕比如电脑手机端,内容自动适应屏幕大小,一行最多占12个标签,
small grid (≥ 768px) = .col-sm-,用于小屏幕设备
medium grid (≥ 992px) = .col-md-
,用于中等屏幕设备
large grid (≥ 1200px) = .col-lg-*.,用于大屏幕设备
col-xs用于超小型设备(max-width:768px);后面跟数字是几,也就是占几份。比如是4,也就是一行可以显示3个;或者12,就是一行可以显示1个;
使用的时候,一般设置的话四个属性都用到会比较好,
如果要兼容所有分辨率都用.举个栗子:

lg=4 md=4 sm=12 xs=12

这样就可以在不同屏幕上很好的展示;
又比如:你有了12个section标签,你想让他们在不同屏幕大小的时候有不同的展示方式,大屏时一行显示6个(12栅格/6=2,所以写col-lg-2),中屏时一行显示3个,小屏时一行展示2个,超小屏一行展示1个,你就可以在每一个section标签里面这样写,

lg=4 md=4 sm=12 xs=12

参考全局CSS样式 · Bootstrap v3 文档

← Atom 常用快捷键 form_for ... do |f|的理解 →