如何在Bootstrap 3中实现响应式网格Ui

Question

我在创建以下UI时遇到问题：

我该如何实现这种设计？

Answer 1

由于Bootstrap 3是“移动优先”，所以使用xs类从最小设备（“屏幕4”）的所需布局开始，然后从那里开始。

以下是一个让您入门的示例：http://bootply.com/129266

Answer 2

将响应表与网格系统一起使用。在这里，我为你做了屏幕＃1：

   <div class="table-responsive">
   <table width="100%" class="table table-striped table-bordered table-hover">
   <tr >
   <td class="col-md-4" rowspan="2" style="background-color:red">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
   <td class="col-md-2" style="background-color:blue">&nbsp;</td>
 </tr>
 <tr>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
 </tr>
 <tr>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   <td style="background-color:blue">&nbsp;</td>
   </tr>
   </table>
   </div>

注意td标签col-md-4和col-md-2中的类。使用网格系统，它们必须加起来为12.使用较大的数字为该列分配更多空间。根据需要调整工作台宽度。