Bootstrap中网格系统中的嵌套怎么用

1、打开HBuilder X，新建项目。

2、打开JS中的index.html：

3、视口和引入Bootstrap：

<!-- 视口 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 引入 Bootstrap -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

4、这里用两列来做比较：

结构：

<!--  Bootstrap 网格的基本结构：

<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

   <div class="row">...</div>

</div>

<div class="container">.... -->

第一列：

<div class="col-md-3" style="background-color: #dedef8;box-shadow: 

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>第一列</h4>

         没有盒子

</div>

5、第二列：

 <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>

</div>

6、嵌套四个盒子：

 <div class="col-md-6" style="background-color: #B18904;

                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                第一个盒子

             </div>

<div class="col-md-6" style="background-color: #B18904;

    box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

    第二个盒子

</div>

<div class="col-md-6" style="background-color: #B18904;

    box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

    第三个盒子

</div>

<div class="col-md-6" style="background-color: #B18904;

    box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

    第四个盒子

</div>

7、在游览器中运行：