AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

准确理解BootStrap中Grid中的列分布

2021-11-13 215
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 准确理解BootStrap中Grid中的列分布

col-12（表示极小屏幕的情况下占据12列即整行）

因为Bootstrap中默认的是一行12列。

col-sm-4（表示小屏幕的情况下占据4列）

col-md-3（表示中等屏幕的情况下占据3列）

不指定数字的情况下，是剩下多少自动填充

image.png

改变原有左右布局的方式

image.png

假如只要11列，可以向右推一列

image.png

文章标签：
前端开发
关键词：
Bootstrap列
答案命运
目录
相关文章
可为编程
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用BootStrap框架搭建的，主要的样式涉及到项目，在这里就不截图了，直接上代码：
可为编程
207 1
卡尔特斯
|
前端开发 JavaScript 容器
Bootstrap 栅格样式-列偏移和列嵌套
Bootstrap 栅格样式-列偏移和列嵌套
卡尔特斯
180 0
SouthernWind
|
前端开发
Bootstrap - 列排序，列偏移，列嵌套
Bootstrap - 列排序，列偏移，列嵌套
SouthernWind
177 0
嗯哼9925
|
Web App开发 JavaScript 前端开发
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
嗯哼9925
1566 0
N..
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
242 0
汪末末
|
前端开发 容器
Bootstrap 组件：嵌入效果（Well）
Bootstrap 框架
汪末末
180 0
Bootstrap 组件：嵌入效果（Well）
汪末末
|
前端开发 容器
Bootstrap 组件：面板组件（panel）
Bootstrap 框架
汪末末
300 0
Bootstrap 组件：面板组件（panel）
汪末末
|
前端开发 开发者 容器
Bootstrap 组件：列表组组件（list-group）
Bootstrap 框架
汪末末
352 0
Bootstrap 组件：列表组组件（list-group）
汪末末
|
前端开发
Bootstrap 组件：分页组件的使用
Bootstrap 框架
汪末末
289 1
Bootstrap 组件：分页组件的使用
广州爱奇迪-伍华聪
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面
广州爱奇迪-伍华聪
367 1