Bootstrap网格示例：小型设备
假设我们有一个简单的布局有两列。 我们想要的列被分割25%/75%为小型设备。
提示：小型设备被定义为具有768像素到991像素的屏幕宽度。
对于小型设备，我们将使用.col-sm-*类。
我们将添加下面的类来我们的两列：
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>现在Bootstrap会说“在小尺寸，寻找教学班， -sm-在其中，并使用这些。”
下面的例子将导致25%/75%的小（大中型）设备分裂。 在额外的小型设备，它会自动堆叠（100％）：
COL-SM-3
COL-SM-9
例
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 试一试» 注：请确保总和总是加起来12。
对于33.3％/ 66.6％分割，你会用.col-sm-4和.col-sm-8 ：
COL-SM-4
COL-SM-8
例
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 试一试» 下一章说明了如何添加不同的分裂％的媒体设备。