列排序
引入类名push-*和 pull-*即可
<div class="col-lg-4 col-lg-push-8">左边</div> <div class="col-lg-8 col-lg-pull-4">右边</div>
列偏移
引入类名:offset
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Document</title> <style> .row div{ height: 30px; background-color: chartreuse; text-align: center; } .container{ border: black 3px solid; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">左边</div> <div class="col-md-4 col-md-offset-4">右边</div> //4+4+4 </div> <div class="row"> <div class="col-md-3">左边</div> <div class="col-md-3 col-md-offset-6">右边</div> //3+3+6 </div> <div class="row"> <div class="col-md-8 col-md-offset-2">居中</div> //(12-8)/2 </div> </div> </body> </html>
如果想让一个或多个盒子偏左或者偏右 偏移份数一共是12两个盒子的份数 加在一起要等于12份
如果想让一个盒子居中对齐的话，就偏移(12-8)/2份就可以了
如图：
列嵌套
可以在.row中嵌套多个.row盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Document</title> <style> .row>div{ text-align: center; background-color: rgb(246, 255, 166); height: 50px; line-height: 50px; border: solid 1px #000; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="row"> //在此处添加一个.row列 <div class="col-md-4">1</div> <div class="col-md-8">1</div> </div> </div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </body> </html>
不可以给div中添加margin值，否则会被挤出盒子
margin-left: 1px;
