<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例</title> <!-- 包含头部信息用于适应不同设备 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 包含 bootstrap 样式表 --> <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>最近好吗？</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> <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --> <!-- 可选: 包含 jQuery 库 --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 可选: 合并了 Bootstrap JavaScript 插件 --> <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
效果图：
布局有两个列，第二列被分为两行四个盒子。