当前位置:网站首页>03列中新增子行

03列中新增子行

2022-08-11 10:19:00 陆俞蓉

(对上一个demo的延伸)

也就是把其中一个列作为另一行的复容器

<div class="container">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
        <div class="row">

            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-6">a1</div>
                    <div class="col-md-6">a2</div>
                </div>
            </div>
            <div class="col-md-9">b</div>
        </div>
    </div>

在这里插入图片描述

BootStrap的布局是非常灵活的,行里可以嵌套列,列里也可以嵌套行

<div class="container">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
        <div class="row">

            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-6">a1</div>
                    <div class="col-md-6">a2</div>
                </div>
                <div class="row">
                    <div class="col-md-6">a3</div>
                    <div class="col-md-6">a4</div>
                </div>
            </div>

            <div class="col-md-9">b</div>
        </div>
    </div>

在这里插入图片描述

原网站

版权声明
本文为[陆俞蓉]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_43872394/article/details/116937665