2019年5月24日
 |  没有评论

bootstrap的12栅格系统

<html>
<link href="bootstrap.min.css" rel="stylesheet">
<style>

.col-md-2{
    background:red;
}

.col-md-10{
    background:green;   
}

.col-md-12{
    background:blue;    
}

.col-md-4{
    background:#990;    
}
.col-md-6{
    background:#960;    
}

</style>
<body>
    <div class="container">

        <div class="row">
        <!--列组合-->
        <div class="col-md-2">test2</div>
        <div class="col-md-10">test2</div>
        </div>

        <div class="row">
        <!--列偏移-->
        <div class="col-md-2 col-md-offset-1">test2</div>
        </div>

        <div class="row">
        <!--列嵌套-->
        <div class="col-md-12">
            <div class="row">
            <div class="col-md-4">test2</div>
            <div class="col-md-6">test10</div>
            </div>
        </div>
        </div>

        <div class="row">
        <!--列排序-->
            <div class="col-md-2 col-md-push-10">test2</div>
            <div class="col-md-10 col-md-pull-2">test10</div>

        </div>

    </div>

</body>
</html>
标签：,