Board logo

标题: Bootstrap CSS----------Bootstrap 网格系统(6) [打印本页]

作者: look_w    时间: 2019-5-11 14:55     标题: Bootstrap CSS----------Bootstrap 网格系统(6)

列里嵌套行---列里多行布局

如果需要一个列里有多行请在这一列里添加一个新的 .row(行),并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <h4>第一列</h4>
                <p>
                    第一列的内容
                </p>
            </div>
            <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <h4>第二列 - 分为四个盒子</h4>
                <div class="row">
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                           第二列下的第一行的第一列内容
                        </p>
                    </div>
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                             第二列下的第一行的第二列内容
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                             第二列下的第二行的第一列内容
                        </p>
                    </div>
                    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>
                           第二列下的第二行的第二列内容
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
    </body>
    </html>

效果如图:




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0