Bootstrap-列嵌套

为了适应内置的栅格系统内容再次嵌套,可以通过添加一个新的.row容器和一些.col-md-*(不仅仅是md)到已经存在的.col-sm-*的容器内。被嵌套的行(row)所包含的列(colmn)的个数不能超过,但是,也没有规定必须占满12列!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列嵌套</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body> 
    <p style="text-align: center;font-size: 30px">栏格布局-列嵌套</p>
   <div class="container">
        <div class="row"> 
            <div class="col-sm-9">
                第一层:col-sm-9
                <div class="row">
                    <div class="col-xs-8 col-sm-6">第二层:col-xs-8 col-sm-6</div>
                    <div class="col-xs-4 col-sm-6">第二层:col-xs-4 col-sm-6</div>
                </div>
            </div>
        </div>
   </div>
</body>
</html>

运行结果:

也就是说,在第一层里面嵌套了第二层!列嵌套!

 

posted @ 2019-09-06 13:59  阿沅lmo  阅读(93)  评论(0编辑  收藏  举报