案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
   <meta charset="utf-8">
5
   <title>Bootstrap 实例 - 嵌套列</title>
6
   <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
   <script src="/js/bootstrap/jquery.min.js"></script>
8
   <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<div class="container">
13
​
14
   <h1>Hello, world!</h1>
15
​
16
   <div class="row">
17
​
18
      <div class="col-md-3" style="background-color: #dedef8;box-shadow:
19
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
20
         <h4>第一列</h4>
21
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
22
      </div>
23
​
24
      <div class="col-md-9" style="background-color: #dedef8;box-shadow:
25
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
26
         <h4>第二列 - 分为四个盒子</h4>
27
         <div class="row">
28
            <div class="col-md-6" style="background-color: #B18904;
29
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
30
               <p>Consectetur art party Tonx culpa semiotics. Pinterest
31
                  assumenda minim organic quis.
32
               </p>
33
            </div>
34
            <div class="col-md-6" style="background-color: #B18904;
35
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
36
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna
37
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
38
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
39
               </p>
40
            </div>
41
         </div>
42
​
43
         <div class="row">
44
            <div class="col-md-6" style="background-color: #B18904;
45
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
46
               <p>quis nostrud exercitation ullamco laboris nisi ut
47
                  aliquip ex ea commodo consequat.
48
               </p>