Bootstrap网格示例：叠放到水平
我们将创建一个开始时堆放在手机/平板电脑（小型设备），成为在桌面上（中型/大型设备）的水平之前，基本的网格系统。
下面的例子显示了一个简单的“叠到横”两栏布局，这意味着它会导致所有屏幕上的50％/ 50％分割，除了额外的小屏幕，它就会自动堆叠（100％）：
COL-SM-6
COL-SM-6
例如：叠放至水平
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 试一试» 提示：在数字.col-sm-*类表示DIV应该有多少列跨越（满分12）。 因此， .col-sm-1跨度1列， .col-sm-4跨度4列， .col-sm-6跨度6列，等等。
注：请确保总和总是加起来12！
提示：您可以通过更改将任何固定宽度布局到全角布局.container类.container-fluid ：
例如：流体容器
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> 试一试»