bootstrap div 居中_Bootstrap的flex样式

最新推荐文章于 2023-05-30 16:15:31 发布

weixin_36480721

最新推荐文章于 2023-05-30 16:15:31 发布

阅读量471

点赞数

文章标签： bootstrap div 居中

本文链接：https://blog.csdn.net/weixin_36480721/article/details/112125873

版权

引入新的Flex弹性布局，可以实现通过一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。

启用弹性盒模型 `.d-flex / .d-inline-flex`

使用display通用属性来创建一个flxbox容器，并将直属内部子元素转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。

<!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;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 变成弹性盒模型 -->
		<div class="row">
			<div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div>
			<div class="col bg-info text-white py-2 d-inline-flex">这是一个弹性盒子</div>
		</div>
	</div>
</body>

</html>

变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex:

.d-flex	.d-inline-flex
.d-sm-flex	.d-sm-inline-flex
.d-md-flex	.d-md-inline-flex
.d-lg-flex	.d-lg-inline-flex
.d-xl-flex	.d-xl-inline-flex

子元素的排列方向

class	描述
.flex-row	正序水平排列
.flex-row-reverse	倒序水平排列
.flex-column	正序垂直排列
.flex-column-reverse	倒序垂直排列

浏览器预默认值下，使用.flex-row可设置子元素水平方向排版呈现，或者使用.flex-row-reverse可实现元素在水平上作反方向排列（右对齐、从右到左布局）。

使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。

<!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;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row bg-dark mt-5 flex-row">	<!-- 正序水平排列 -->
			<div class="bg-success text-white">第1列</div>
			<div class="bg-success text-white">第2列</div>
			<div class="bg-success text-white">第3列</div>
		</div>
		<div class="row bg-dark mt-1 flex-row-reverse">	<!-- 倒序水平排列 -->
			<div class="bg-success text-white">第1列</div>
			<div class="bg-success text-white">第2列</div>
			<div class="bg-success text-white">第3列</div>
		</div>
		<div class="row bg-dark mt-1 flex-column">	<!-- 正序垂直排列 -->
			<div class="bg-success text-white">第1列</div>
			<div class="bg-success text-white">第2列</div>
			<div class="bg-success text-white">第3列</div>
		</div>
		<div class="row bg-dark mt-1 flex-column-reverse">	<!-- 倒序垂直排列 -->
			<div class="bg-success text-white">第1列</div>
			<div class="bg-success text-white">第2列</div>
			<div class="bg-success text-white">第3列</div>
		</div>
	</div>
</body>

</html>

响应式的排列方式，flex-{breakpoint}-row/column/：

水平方向	垂直方向
.flex-sm-row / row-reverse	.flex-sm-column / column-reverse
.flex-md-row / row-reverse	.flex-md-column / column-reverse
.flex-lg-row / row-reverse	.flex-lg-column / column-reverse
.flex-xl-row / row-reverse	.flex-xl-column / column-reverse

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel=

最低0.47元/天解锁文章

weixin_36480721

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap div 居中_Bootstrap的flex样式

引入新的Flex弹性布局，可以实现通过一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。启用弹性盒模型 .d-flex / .d-inline-flex 使用display通用属性来创建一个flxbox容器，并将直属内部子元素转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。<!DOCTYPE html><...
复制链接

扫一扫