栅格 - 代码天地

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<style type="text/css">
  .row{
      margin-bottom: 20px;
  }
    [class*="col-"]{
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #66afe9;
        border: 1px silver solid;
    }
</style>
<body>
   <div class="container">
       <div class="row">
           <!--最多一行12个 内容高度会根据内容自适应-->
           <div class="col-md-1">col-md-1</div>
           <div class="col-md-1">col-md-1</div>
           <div class="col-md-1">col-md-1</div>
           <div class="col-md-1">col-md-1</div>
           <div class="col-md-1">col-md-1</div>
       </div>
       <div class="row">
           <div class="col-md-3">col-md-3</div>
           <div class="col-md-3">col-md-3</div>
           <div class="col-md-3">col-md-3</div>
           <div class="col-md-3">col-md-3</div>
       </div>
       <div class="row">
           <!--实现偏移-->
           <div class="col-md-4 col-lg-offset-1">col-md-4</div>
       </div>
       <!--嵌套 1和2嵌套在one里-->
       <div class="row">
       <div class="col-sm-10">
           one
           <div class="row">
               <div class="col-xs-8">
                    1
               </div>
               <div class="col-xs-4">
                   2
               </div>
           </div>
       </div>
       </div>
       <!--左右互换-->
       <div class="row">
           <div class="col-md-9 col-md-push-3">col-md-9</div>
           <div class="col-md-3 col-md-pull-9">col-md-3</div>
       </div>
   </div>
</body>
</html>
栅格

猜你喜欢
