bootstrap div 居中_Bootstrap栅格系统布局的对齐方式

最新推荐文章于 2024-10-07 16:46:14 发布
最新推荐文章于 2024-10-07 16:46:14 发布
阅读量8.5k 收藏 9
点赞数 2
文章标签： bootstrap div 居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35094438/article/details/112111212
版权
这篇博客详细介绍了Bootstrap栅格系统中的布局对齐方法，包括垂直对齐（行和列的单独对齐）、水平对齐策略、列排序、列偏移、间距调整以及嵌套使用。对齐方式涵盖了从顶对齐、居中到底对齐，以及左对齐、居中、右对齐等不同场景。此外，还提到了如何创建列间距和进行列的顺序调整。
摘要由CSDN通过智能技术生成

1e532bf7f2551e9c6beedfea7694239d.png

垂直对齐

1、行的对齐方式
align-items-start 顶对齐
align-items-center 中间对齐
align-items-end 底对齐

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row v-align align-items-start">
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
		</div>
		<div class="row v-align align-items-center">
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
		</div>
		<div class="row v-align align-items-end">
			<div class="col">垂直对齐-底对齐-行的对齐方式</div>
			<div class="col">垂直对齐-底对齐-行的对齐方式</div>
			<div class="col">垂直对齐-底对齐-行的对齐方式</div>
		</div>
	</div>
</body>

</html>

cd02f1367bb24bcb60a817c4d5ff4d4d.png

2、列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row v-align">
			<div class="col align-self-start">垂直对齐-顶对齐-列的对齐方式</div>
			<div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
			<div class="col align-self-end">垂直对齐-底对齐-列的对齐方式</div>
		</div>
	</div>
</body>

</html>

a773c3cc8714dc02eef7dc1b63b468c0.png

水平对齐

1、justify-content-start 左对齐
2、justify-content-center 居中对齐
3、justify-content-end 右对齐
4、justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）
5、justify-content-between 左右两端对齐（元素之间的间距是自动平分的）

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row v-align justify-content-start">
			<div class="col-4">水平对齐-左对齐</div>
			<div class="col-4">水平对齐-左对齐</div>
		</div>
		<div class="row v-align justify-content-center">
			<div class="col-4">水平对齐-居中对齐</div>
			<div class="col-4">水平对齐-居中对齐</div>
		</div>
		<div class="row v-align justify-content-end">
			<div class="col-4">水平对齐-右对齐</div>
			<div class="col-4">水平对齐-右对齐</div>
		</div>
		<div class="row v-align justify-content-around">
			<div class="col-4">水平对齐-分散居中对齐</div>
			<div class="col-4">水平对齐-分散居中对齐</div>
		</div>
		<div class="row v-align justify-content-between">
			<div class="col-4">水平对齐-左右两端对齐</div>
			<div class="col-4">水平对齐-左右两端对齐</div>
		</div>
	</div>
</body>

</html>

c7a0f1335ccdef13ac46d112ceda665d.png

列排序

4.x的版本使用.order-{breakpoint}-

（3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*来排序）

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">第1列</div>
			<div class="col order-5">第2列</div>
			<div class="col order-6">第3列</div>
		</div>
		<div class="row mt-5">
			<div class="col">第1列</div>
			<div class="col order-xl-5">第2列</div>	<!-- 只有当屏幕尺寸>=1200的时候，才会进行排序 -->
			<div class="col order-xl-2">第3列</div>
		</div>
		<div class="row mt-5">
			<div class="col">第1列</div>
			<div class="col order-first">第2列</div><!-- order-first代表排在第1位，order-last代表排在最后一位 -->
			<div class="col order-last">第3列</div>
			<div class="col">第4列</div>
		</div>
	</div>
</body>

</html>

becd223fbe2284b76744fc4ad577edd5.png

列偏移

使用offset-{breakpoint}-*

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 列偏移，使用offset-{breakpoint}-* -->
		<div class="row mt-5">
			<div class="col-md-4">第1列</div>
			<div class="col-md-4 offset-md-4">往右偏移4列</div>
		</div>
		<div class="row mt-5">
			<div class="col-3 offset-md-3">第1列</div>
			<div class="col-3 offset-md-3">第2列</div>
		</div>
		<div class="row mt-5">
			<div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div>
			<div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列，中屏偏移5列</div>
		</div>
	</div>
</body>

</html>

7572dd9288b374afb7bba7efce5e9f2f.png

间距：使用margin工具可以让列之间产生间距

mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col-md-4">第1列</div>
			<div class="col-md-4 ml-auto">第2列，跑到最右边</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
			<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
		</div>
		<div class="row mt-5">
			<div class="col-auto mr-auto">宽度由内容撑开</div>
			<div class="col-auto">宽度由内容撑开</div>
		</div>
	</div>
</body>

</html>

嵌套

每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		}
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		}
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		}
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col-sm-9" style="height: 150px;background: grey;">
				父级的第1列
				<div class="row">
					<div class="col-sm-8 col-6">子级的第1列，小屏下占8列，超小屏下占6列</div>
					<div class="col-sm-4 col-6">子级的第2列，小屏下占4列，超小屏下占6列</div>
				</div>
			</div>
			<div class="col-sm-3" style="height: 150px;background: pink;">父级的第2列</div>
		</div>
	</div>
</body>

</html>

df0229f1609198327a0af30a3ea9092c.png
Maqiu467
关注
Java 反射实例化对象的方法
CodeShiftZ的博客
09-24 91
在 Java 中，反射是一种强大的机制，它允许我们在运行时检查类、方法、字段等，并且可以在运行时动态创建对象。反射提供了一组 API，可以通过类的名称、方法名、字段名等来获取类的信息并操作它们。需要注意的是，反射虽然强大，但是它的使用也需要谨慎。因此，在能够使用其他方式解决问题的情况下，最好避免使用反射。方法返回的构造函数可能是私有的，因此我们需要使用。或者直接使用类名获取到我们要实例化的类的。要实例化一个对象，可以使用反射机制中的。方法通过构造函数对象来实例化对象。的对象，并打印了它的信息。
Bootstrap框架——栅格系统
ln201009的博客
12-28 3766
1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为Bootstrap框架。 2、打开桌面新建的文件夹，在js里面放入bootstrap所需要的css和js。 3、然后继续打开vs文件，去新建的html文件里边，用外部样式，引入bootstrap的css样式表。 4、再在body标签里边，引入bootstrap的js文件，我们先引入这些的原因是因为为引入bootstrap的插件做好准备工作，不然到后面出现问题很麻烦。接下来我们就
JS学习记录2
十三月的博客
09-27 433
Global对象 eval json Math对象 Number对象 Object对象
使用align-item为center后i图标和文字依旧不对齐
最新发布
Zwwxd666的博客
10-07 251
明明都设置了align item为center了。
Java反射系列--通过反射实例化对象
IT利刃出鞘的博客
12-15 5931
本文用示例介绍Java通过反射来实例化对象的方法。
JavaScript深入之new的模拟实现
weixin_33901843的博客
05-04 126
JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 也许有点难懂，我们在模拟 new 之前，先看看 new 实现了哪些功能。 举个例子： // Otaku 御宅族，简称宅 fun...
Java反射机制——通过反射机制实例化对象（详解）
Best_Basic的博客
08-25 3437
1、使用反射机制实例化对象比较灵活。 Java代码只需写一遍，在不改变Java源代码的基础之上，可以做到不同对象的实例化。 非常灵活（符合OCP开闭原则：对扩展开放，对修改关闭。） 如果只要静态代码块执行，使用Class.forName(”完整类名“)。 2、java.util包下提供了一个资源绑定器，用于获取属性配置文件中的内容。 使用该方式时，属性配置文件必须放在类路径下; 资源绑定器，只能绑定xxx.properties文件 。......
Bootstrap（bootstrap的栅格系统、bootstrap的布局容器）
m0_46420078的博客
02-03 6281
一、bootstrap的栅格系统 用固定的格子进行网页布局，又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时，网页根据不同的显示终端展示不同的页面结构。 例如，在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤（1）创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码（2）编写css样式 页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...
bootstrap 页面分成三列_bootstrap3.0教程之栅格系统原理(布局)
weixin_30233335的博客
01-26 1787
栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口(viewport)尺寸的增加，系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：行(row)必须包含在...
Bootstrap入门书籍之（三）栅格系统
09-02
Bootstrap栅格系统是网页设计和开发中的一个关键组成部分，尤其对于构建响应式网站至关重要。Bootstrap框架的栅格系统提供了一种高效、灵活的方式来组织和排列网页内容，使其能够在各种屏幕尺寸上良好展示，从手机到...
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
在标题和描述中提到的问题，即在使用Bootstrap时，登录框无法自动在视觉中心对齐，这通常是因为Bootstrap的栅格系统和自动流布局特性导致的。不过，通过一些技巧和自定义CSS，我们可以解决这个问题。 首先，要理解...
Java反射机制实例化对象
ResumeProject的博客
03-05 278
//通过反射机制,获取Class ,通过Class来实例化对象 Class C = Class.forName("com.java.bean.User"); object obj = c.newInstance();//调用无参数构造方法，实例化 优点：通过读取配置文件，可以实现一套代码创建不同对象，复合开闭原则 User user=new User(); ...
java 反射类 实例化_Java class 类通过反射实例化对象
weixin_28762271的博客
02-12 153
Class#newInstance方法已经被弃用了，从注释中可以看到推荐使用Constructor#newInstance方法生成实例，即直接通过构造方法生成实例：// getConstructor 方法入参是可变长参数列表，对应类中构造方法的入参类型，这里使用无参构造。// newInstance 返回的是泛型 T，取决于 clazz 的类型 Class。这里直接用 Object 接收了。Obj...
js 实现new
GeXueliu的博客
04-13 441
实现 new 操作符 创建空白对象 修改空白对象的原型为构造函数的原型 this 指向空白对象，并执行构造函数 返回对象 function Animal(name,age) { this.name = name; this.age = age; } function _new(constructor,...args) { let instance = {}; // instance._proto_ = construc
js 实现 new
weixin_44076775的博客
07-01 455
我们经常会使用new关键字，那我们在使用new关键字的时候，new到底做了什么呢
JS实现一个new
AS_Tammy的博客
07-13 313
实现一个new 代码如下: var Dog = function(name) { this.name = name; } Dog.prototype.bark = function() { console.log('wang'); } Dog.prototype.sayName = function() { console.log('my name is', this.name); }...
Java------反射机制之通过反射实例化对象
yaoshutong的博客
10-05 1137
通过Class的newInstance()方法来实例化对象 注意：newInstance()内部实际上调用了无参数构造方法，必须保证无参数构造的存在
js实现new功能
coder_yujian的博客
10-28 71
【代码】实现new功能。
BootStrap Div居中
热门推荐
fanxl10的专栏
03-03 9万+
使用BootStrap，如果一个Div只占用了一小部分，怎么居中呢？ BootStrap3.3.2测试 .col-center-block { float: none; display: block; margin-left: auto; margin-right: auto; } 请登录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值