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> 试一试»