bootstrap柵格

.col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

分为12个格子 -后面的1代表占12分子1也就是一份

1.中等屏幕

复制代码
<div class="container-fluid a">
			<div class="row">
				<div class="col-md-1 a">1</div>
				<div class="col-md-1 a">2</div>
				<div class="col-md-1 a">3</div>
				<div class="col-md-1 a">4</div>
				<div class="col-md-1 a">5</div>
				<div class="col-md-1 a">6</div>
				<div class="col-md-1 a">7</div>
				<div class="col-md-1 a">8</div>
				<div class="col-md-1 a">9</div>
				<div class="col-md-1 a">10</div>
				<div class="col-md-1 a">11</div>
				<div class="col-md-1 a">12</div>
			</div>
			<div class="row">
				<div class="col-md-9 a">9</div>
				<div class="col-md-3 a">3</div>
			</div>
			<div class="row">
				<div class="col-md-4 a">4</div>
				<div class="col-md-4 a">4</div>
				<div class="col-md-4 a">4</div>
			</div>
		</div>

2.兼容写法

复制代码
<div class="container">
            <div class="row">
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
                <div class="col-lg-3 a col-md-4 col-sm-6 col-xs-6"></div>
            </div>
        </div>

本人电脑是1920PX,所以适用的是LG,也就是12等份占3份,一行也就是4个格子。

  1. 偏移

    复制代码
     	<div class="container">
     		<div class="row">
     			<div class="col-md-8 a">8</div>
     			<div class="col-md-3 a col-md-offset-1">3</div>
     		</div>
     	</div>

4.嵌套

复制代码
<!--嵌套-->
		<div class="container">
			<div class="row">
				<div class="col-md-9 a" style="padding: 0;">
					<div class="col-md-4 a"></div>
					<div class="col-md-4 a"></div>
					<div class="col-md-4 a"></div>
				</div>
				<div class="col-md-3 a"></div>
			</div>
		</div>

5.交换位置

复制代码
<!--交换位置-->
		<div class="container">
			<div class="row">
				<div class="col-md-9 col-md-push-3 a">9</div>
				<div class="col-md-3 col-md-pull-9 a">3</div>
			</div>
		</div> 
相关推荐
江城开朗的豌豆3 分钟前
解密useEffect:让副作用无所遁形!
前端·javascript·react.js
IT_陈寒12 分钟前
SpringBoot性能翻倍的7个隐藏配置,90%开发者从不知道!
前端·人工智能·后端
CODE_RabbitV17 分钟前
【1分钟速通】 HTML快速入门
前端·html
weixin_4597931018 分钟前
SSE 模仿 GPT 响应
前端
rookie fish24 分钟前
Electron+Vite+Vue项目中,如何监听Electron的修改实现和Vue一样的热更新?[特殊字符]
前端·vue.js·electron
她超甜i28 分钟前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
歪歪10034 分钟前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
东风西巷38 分钟前
Atlantis Word Processor:全方位的文字处理专家
前端·学习·word·软件需求
今天不要写bug1 小时前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优1 小时前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式