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>

运行结果:

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

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

阿沅lmo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者