<divclass=”col-md-1″>.col-md-1</div>
</div>
<h1></h1>
<divclass=”row”>
<divclass=”col-md-8″>.col-md-8</div>
<divclass=”col-md-4″>.col-md-4</div>
</div>
<h1></h1>
<divclass=”row”>
<divclass=”col-md-4″>.col-md-4</div>
<divclass=”col-md-4″>.col-md-4</div>
<divclass=”col-md-4″>.col-md-4</div>
</div>
<h1></h1>
<divclass=”row”>
<divclass=”col-md-6″>.col-md-6</div>
<divclass=”col-md-6″>.col-md-6</div>
</div>
</div>
可以通过控制浏览器的宽度查看堆叠和水平排列的效果
很明显这就是堆叠的效果，就是将浏览器的宽度调为比较小的时候。
现在便是水平排列。将浏览器的宽度调为稍宽之后。你也可以使用其他三个类进行测试效果。
移动设备和桌面
从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*（小于768px屏幕的样式类）就派上用场了。
复制代码
<div class=”page-header”>
<h1>案例:移动设备和桌面</h1>
</div>
<div class=”row”>
<div class=”col-xs-12 col-md-8″>.col-xs-12 .col-md-8</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>
<h1></h1>
<div class=”row”>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>
<h1></h1>
<div class=”row”>
<div class=”col-xs-6″>.col-xs-6</div>
<div class=”col-xs-6″>.col-xs-6</div>
</div>
<h1></h1>
通过代码可以发现针对前两个的.row样式类中的div，我们在每个元素上面都设置了两个样式类。
这是在稍大尺寸的屏幕上展示的效果，针对每个元素的两个样式会在不同尺寸下进行合适的选择，那么在稍大的情况下，选择的样式类就会是.col-md-*。
所以：
第一行：8和4的份比。
第二行：三个4平平均分成三份。
