<div> <div > <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div></div> <div> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div>
解释一下中间这句：
<div></div>
响应式实用工具目前适用于块和表切换。看下面两个表格就知道了。
网格的基本结构
<div> <div> <div></div> <div></div> </div> <div>...</div> </div> <div>....
实例三：响应式实用工具
源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式实用工具</title> <link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div> <div> <div> <span>特别小型</span> <span>✔ 在特别小型设备上可见</span> </div> <div> <span>小型</span> <span>✔ 在小型设备上可见</span> </div> <div></div> <div> <span>中型</span> <span>✔ 在中型设备上可见</span> </div> <div> <span>大型</span> <span>✔ 在大型设备上可见</span> </div> </div> </div> </body> </html>
效果如下：
大型设备时：
其他设备略。
偏移列
.col-xs=*类不支持偏移，可以通过使用一个空的单元格来实现该效果。
使用.col-md-offset-*类可以把一个列的左外边距增加*列，其中*的范围是从1到11。
<div> <h1>Hello, world!</h1> <div > <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div>
效果：
嵌套列
嵌套需要添加一个新的.row，然后在这个嵌套的.row里添加一组.col-md-*列。这组列的个数不能超过12。