grid system 栅栏系统

来源：互联网发布：很有节奏感的网络歌曲编辑：程序博客网时间：2024/05/22 03:22
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="bootstrap.min.css">    <style>        .row{            margin-bottom: 20px;        }        .row .row{            margin-top: 10px;            margin-bottom: 0px;        }        [class*="col-"]{ <!-通配符所有的col都是这种样式----->            padding-top: 15px;            padding-bottom: 15px;            background-color: #ff65ea;            border:  1px solid #a522ff;        }    </style></head><body><div class="container">    <div class="row">        <div class="col-lg-1"><a href="#">222</a></div>        <div class="col-lg-1">2</div>        <div class="col-lg-1">3</div>        <div class="col-lg-1">4</div>        <div class="col-lg-1">5</div>        <div class="col-lg-1">6</div>        <div class="col-lg-1">7</div>        <div class="col-lg-1">8</div>        <div class="col-lg-1">9</div>    </div>    <div class="row">    <!--偏移offset 1 指的是偏移12中的一个                   2                 2个------->     <div class="col-lg-4 col-lg-offset-2" >4</div></div>    /*栅格嵌套**/    <div class="row">        <div class="col-md-5">            <div class="row">                <div class="col-sm-2"></div>            </div>            <div class="row">                <div class="col-sm-2"></div>            </div>            </div>    </div>    <div class="row">        <div class="col-lg-4 col-lg-push-5">4</div>/*push 后推 pull 前进**/        <div class="col-lg-1 col-lg-pull-4">1</div>    </div>    </div></body></html>
0 0