Bootstrap操作之容器列的划分

最新推荐文章于 2025-01-18 18:35:59 发布

原创最新推荐文章于 2025-01-18 18:35:59 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用Bootstrap进行容器和列的划分，包括创建6个等分的列、设置不同比例的列组合、推拉效果实现、列的嵌套以及列的偏移操作。通过实例代码展示了各种布局技巧，帮助读者掌握Bootstrap布局的基本方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<title>Bootstrap操作之 容器列的划分</title>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		.test{border: 1px solid #DDD; background:#EEE;}
		.clear{padding: 0; margin: 0}
	</style>
</head>
<body>
	<img class="img-rounded" src="1.jpg" alt="" width="350" />
	<img class="img-circle" src="1.jpg" alt="" width="350" />
<p class="text-center">1、分6个等份</p>
<!-- div.container>div.row>div.col-md-2.test{1}*6 -->
<div class="container">
	<div class="row">
		<div class="col-md-2 test">1</div>
		<div class="col-md-2 test">1</div>
		<div class="col-md-2 test">1</div>
		<div class="col-md-2 test">1</div>
		<div class="col-md-2 test">1</div>
		<div class="col-md-2 test">1</div>
	</div>
</div>

<p class="text-center">2、分成三部分，4、5、3列</p>
<!-- .container>.row>(.col-md-4.test{1})+(.col-md-5.test{1})+(.col-md-3.test{1}) -->
<div class="container">
	<div class="row">
		<div class="col-md-4 test">4</div>
		<div class="col-md-5 test">5</div>
		<div class="col-md-3 test">3</div>
	</div>
</div>

<p class="text-center">3、推拉</p>
<p class="text-center">原样</p>
<div class="container">
	<div class="row">
		<div class="col-md-7 test">7</div>
		<div class="col-md-5 test">5</div>
	</div>
</div>
<p class="text-center">推拉效果</p>
<!-- .container>.row>(.col-md-7.col-md-push-5.show{7})+(.col-md-5.col-md-pull-7.show{5}) -->
<div class="container">
	<div class="row">
		<div class="col-md-7 col-md-push-5 test">7</div>
		<div class="col-md-5 col-md-pull-7 test">5</div>
	</div>
</div>

<div class="text-center">4、嵌套</div>.container>.row>(.col-md-9.test{9})+(.col-md-3.test{3})
<div class="container">
	<div class="row">
		<div class="col-md-9 test">9</div>
		<div class="col-md-3 test">3</div>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-9 clear">
			<div class="col-md-3 test">3</div>
			<div class="col-md-4 test">4</div>
			<div class="col-md-5 test">5</div>
		</div>
		<div class="col-md-3 test">3</div>
	</div>
</div>

<div class="text-center">5、偏移</div>
<div class="container">
	<div class="row">
		<div class="col-md-4 test">4</div>
		<div class="col-md-4 col-md-offset-4 test">偏移4列</div>
	</div>
</div>


</body>
</html>