bootstrap 网格布局
一:基本的网格布局
<div class="container">
<div class="row">
<div class="col-md-4">占四格</div>
<div class="col-md-6">占八格</div>
</div>
</div>
1、一行网格数一共有分为12格,
<div class="col-md-4">占四格</div>:表示一列占4格
<div class="col-md-8">占八格</div>:表示一列占8格
两列加起来一共是12格。
不论分为多少列,加起来格数必须是12格
2、col-md-4是什么意思
col-md-:表示显示页面尺寸>992px ;4:表示一列占多少格数
3、显示页面尺寸
<768px使用.col-xs-格数
>=768px使用.col-sm-格数
>=992px使用.col-md-格数
>=1200px使用.col-lg-格数
4、偏移
右偏移:<div class="col-md-4 col-md-push-8">占四格,往右偏移8格</div>
左偏移:<div class="col-md-8 col-md-pull-4">占8格,往左偏移4格</div>
5、嵌入
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">占四格</div>
<div class="col-md-4">占四格</div>
<div class="col-md-4">占四格</div>
</div>
</div>
<div class="col-md-8">占八格</div>
</div>
</div>
上述例子:一条网格分为两列,第一列占四格,第二列占8格,
在第一列嵌入一条3列网格,每列都占四格
最新文章
- C# 发送电子邮件
- Linux C编程学习之C语言简介---预处理、宏、文件包含……
- gulp 基本使用
- bitnami-redmine 安装与插件使用
- 在Sharepoint2010中一种自定义调查列表的不允许再次答复提示的处理方法!
- How to run an manually installed program from terminals in Linux / Ubuntu
- rubymine配置 rspec
- centos apache 隐藏和伪装 版本信息
- Quartz任务调度器及与Spring的整合使用
- Java爬虫----有道翻译初步
- linux修改root账户的用户名所得的教训
- Django模板语言相关内容
- [Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST
- 架构设计---soa与msa的概念(转)
- 2017第45周一java多线程创建方法
- RNA测序的质量控制
- 用JS来实现的第一个简单游戏 :贪吃蛇
- 2018ACM-ICPC南京区域赛M---Mediocre String Problem【exKMP】【Manacher】
- swift 头尾式动画
- 配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp