Bootstrap網格例子：大型設備
在前面的章節中，我們提出用類中小型設備網格的例子。 我們用兩個div（列），我們給了他們一個25%/75%在小型設備上分裂，和50%/50%在中型設備拆分：
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>但在大的設備的設計可以是一個更好的33%/66%的分裂。
提示：大型設備被定義為具有從1200像素和上方的屏幕寬度。
對於大型設備，我們將使用.col-lg-*類。
所以，現在我們將增加對大型設備的列寬：
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>現在引導會說“在小尺寸，看看帶班-sm-在其中，並使用這些。在中等大小，看看帶班-md-在其中，並使用這些。在大尺寸，看類字-lg-在其中，並使用這些。“
下面的例子將導致25%/75%在小型設備上分裂，一個50%/50%在中型設備拆分和33%/66%對大型設備的分流：
例
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 試一試» 注：請確保總和總是加起來12。
使用只有大
在下面的例子中，我們只指定.col-lg-6級（無.col-md-*和/或.col-sm-* ）。 這意味著，較大的設備將分割的50％/ 50％。 然而，對於中，小型設備，它將垂直堆疊（100％的寬度）：
例
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 試一試»