设计
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.col-sm-6,.col-sm-4,.col-sm-3,.col-sm-12,.col-sm-1{
border:1px red solid;
height:50px;
}
.col-sm-4{
height:200px;
}
</style>
</head>
<body>
<div class=" well"></div>
<div class="container">
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-4</div>
<div class="col-sm-3">col-sm-4</div>
<div class="col-sm-3">col-sm-4</div>
<div class="col-sm-3">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-1 col-sm-offset-1">col-sm-1</div>
</div>
</div>
<div class=" well" style="height:100px;"></div>
</body>
</html>
效果
列偏移
<div class="row">
<div class="col-sm-1 col-sm-offset-1">col-sm-1</div>
</div>
最后一行偏移一个栅格。
网友评论