Bootstrap网格示例：中型设备
在前面的章节中，我们提出用类为小型设备网格的例子。 我们用两个div（列），我们给了他们一个25%/75%分：
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>但介质器件的设计可以是一个更好的50%/50%的分裂。
提示：中型设备被定义为具有992像素的屏幕宽度为1199像素。
对于中等设备，我们将使用.col-md-*类。
现在，我们将增加对中装置的列宽：
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
现在Bootstrap会说“的体积小，看个教学班， -sm-在其中，并使用这些。在中等大小，看看带班-md-在其中，并使用这些。”
下面的例子将导致25%/75%的小型设备拆分和50%/50%中等（大）设备分割。 在额外的小型设备，它会自动堆叠（100％）：
例
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 试一试» 注：请确保总和总是加起来12。
仅使用中
在下面的例子中，我们只指定.col-md-6级（无.col-sm-* ）。 这意味着，中型和大型设备将分割50%/50% -因为类可扩展至。 但是，对于小型设备，它将垂直堆叠（100％的宽度）：
例
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
试一试» 下一章说明了如何添加不同的分裂％的大型设备。