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> 
相关推荐
white-persist3 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师41 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm