Bootstrap 堆叠与水平的网格

Bootstrap 网格实例: 从堆叠到水平放置

我们将创建一个基本的网格系统，首先在超小型设备上堆叠，然后在大型设备上水平放置。

下面的示例显示了一个简单的 "堆叠到水平" 两列布局，这意味着它将在所有屏幕上被分割成 50% 与 50% 的两列，除了在小屏幕（这时两列将自动堆叠（100%））

实例: 从堆叠到水平放置

 <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>

提示: 通过将 .container 类更改为 .container-fluid，可以将任何 fixed-width 的布局转换为full-width 布局:

实例: 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>