如何在Bootstrap响应表中设置列的大小？我不希望桌子放松它的反复功能.我也需要它在IE8中工作.我已经包含了HTML5SHIV和Respond.
我正在使用Bootstrap 3(3.2.0)
<div class="table-responsive">
<table id="productSizes" class="table">
<thead>
<tr>
<th>Size</th>
<th>Bust</th>
<th>Waist</th>
<th>Hips</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>79 - 81</td>
<td>61 - 63</td>
<td>89 - 91</td>
</tr>
<tr>
<td>8</td>
<td>84 - 86</td>
<td>66 - 68</td>
<td>94 - 96</td>
</tr>
</tbody>
</table>
</div>
解决方法
Bootstrap 4.0
请注意Bootstrap 3到4的所有migration更改.在桌面上,您现在需要通过添加类d-flex启用弹性框,并删除xs以允许bootstrap自动检测视口.
<div class="container-fluid">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-1">Size</th>
<th class="col-3">Bust</th>
<th class="col-3">Waist</th>
<th class="col-5">Hips</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1">6</td>
<td class="col-3">79 - 81</td>
<td class="col-3">61 - 63</td>
<td class="col-5">89 - 91</td>
</tr>
<tr class="d-flex">
<td class="col-1">8</td>
<td class="col-3">84 - 86</td>
<td class="col-3">66 - 68</td>
<td class="col-5">94 - 96</td>
</tr>
</tbody>
</table>
Bootstrap 3.2
Table列宽使用与grids相同的布局;使用col- [viewport] – [size].请记住,列大小应为12;在这个例子中,1 3 3 5 = 12.
<thead>
<tr>
<th class="col-xs-1">Size</th>
<th class="col-xs-3">Bust</th>
<th class="col-xs-3">Waist</th>
<th class="col-xs-5">Hips</th>
</tr>
</thead>
请记住设置< th>元素而不是< td>元素因此它设置整个列.这是一个工作BOOTPLY.
感谢@Dan提醒我始终首先使用移动视图(col-xs- *).
