我在创建以下UI时遇到问题:
我该如何实现这种设计?
答案 0 :(得分:1)
由于Bootstrap 3是“移动优先”,所以使用xs
类从最小设备(“屏幕4”)的所需布局开始,然后从那里开始。
以下是一个让您入门的示例:http://bootply.com/129266
答案 1 :(得分:0)
将响应表与网格系统一起使用。在这里,我为你做了屏幕#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"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
</tr>
<tr>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
</tr>
</table>
</div>
注意td标签col-md-4和col-md-2中的类。使用网格系统,它们必须加起来为12.使用较大的数字为该列分配更多空间。根据需要调整工作台宽度。