grid system 栅栏系统

最新推荐文章于 2023-05-25 21:07:27 发布

难瘦不难过

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量509

点赞数

本文链接：https://blog.csdn.net/osweet12345678/article/details/51870736

版权

<!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>