bootstrap 的布局
2024-09-03 12:06:16
第一步：你要做的就是选择适合你显示器的标签：
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
假如你用的是电脑;那么你就应该选择-----md,选择其他的就会出现 换行 等错误
第二步，引入bootstrap
第三步，实验：
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
有趣的实验结果就会很清晰的出现在你的桌面上！！
最新文章
- MIP 官方发布 v1稳定版本
- NSString 初始化方法的内存比较
- 在matlab中配置vlfeat
- 一、HTML和CSS基础--HTML+CSS基础课程--第5部分
- NP
- 2016年6月23日 星期四 --出埃及记 Exodus 14:20
- OpenGL学习之路（二）
- css实现超出一行后用省略号显示
- QUiLoader 动态加载.ui文件
- linux日志审计项目案例实战（生产环境日志审计项目解决方案）
- ios animation暂停pause、恢复resume
- JavaScript打开新窗口被拦截问题
- Codeforces Round #549 (Div. 2) 训练实录 (5/6)
- JDBC中execute、executeQuery和executeUpdate的区别
- vue-app开发入门
- 解决Chunkize warning while installing gensim问题
- 纯css3棋盘图案背景以及45度斜纹背景
- Caffe 使用记录（一）mnist手写数字识别
- web开发中的两把锁之数据库锁：（高并发--乐观锁、悲观锁）
- mongoDB自动杀执行时间的连接