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>
試一試» 下一章說明了如何添加不同的分裂％的大型設備。