<!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>Bootstrap操作之 容器列的划分
猜你喜欢
转载自blog.csdn.net/samcphp/article/details/79764378
今日推荐
周排行