Bootstrap栅格布局的列偏移实例

来源：意榕旅游网

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="dist/css/bootstrap.css">
 <script src="jquery-3.2.1.js"></script>
 <script src="dist/js/bootstrap.js"></script>
 <title>栅格布局的列偏移</title>
 <style>
 .grid {
 border: 1px solid #696969;
 border-radius: 5px;
 background-color: lightskyblue;
 min-height: 30px;
 text-align: center;
 line-height: 30px;
 }
 .green {
 background-color: lightgreen;
 }
 .pink {
 background-color: lightpink;
 }
 </style>
</head>
<body>
<div>
 <div>
 <div class="col-md-4 grid">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4 grid">.col-md-4 .col-md-offset-4</div>
 </div>
 <div>
 <div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
 </div>
 <div>
 <div class="col-md-6 col-md-offset-3 grid">.col-md-6 .col-md-offset-3</div>
 </div>
</div>
</body>
</html>

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务