如何在 Bootstrap 响应表中设置列的大小 [英] How to set the size of a column in a Bootstrap responsive table
问题描述
如何在 Bootstrap 响应表中设置列的大小?我不希望桌子失去其响应功能.我也需要它在 IE8 中工作.我已经包含了 HTML5SHIV 和 Respond.
我使用的是 Bootstrap 3 (3.2.0)
<table id="productSizes" class="table"><头><tr><th>大小</th><th>胸围</th><th>腰</th><th>臀部</th></tr></thead><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> 解决方案 Bootstrap 4.0
注意从 Bootstrap 3 到 4 的所有migration变化.在桌子上,你现在需要通过添加类 d-flex
来启用弹性框,并删除 xs
以允许引导程序自动检测视口.
<table id="productSizes" class="table"><头><tr class="d-flex"><th class="col-1">大小</th><th class="col-3">胸围</th><th class="col-3">腰部</th><th class="col-5">臀部</th></tr></thead><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>引导程序 3.2
表格 列宽使用与 网格 做;使用 col-[viewport]-[size]
.请记住,列大小总共应为 12;1 + 3 + 3 + 5 = 12
在这个例子中.
<tr><th class="col-xs-1">大小</th><th class="col-xs-3">胸围</th><th class="col-xs-3">腰部</th><th class="col-xs-5">臀部</th></tr></thead>记住设置 元素而不是 元素,以便它设置整个列.这是一个有效的 BOOTPLY.感谢@Dan 提醒我始终首先使用移动视图 (col-xs-*
).
How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond.
I'm using 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
Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex
, and drop the xs
to allow bootstrap to automatically detect the viewport.
<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 column width use the same layout as grids do; using col-[viewport]-[size]
. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12
in this example.
<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>
Remember to set the <th>
elements rather than the <td>
elements so it sets the whole column. Here is a working BOOTPLY.
Thanks to @Dan for reminding me to always work mobile view (col-xs-*
) first.
这篇关于如何在 Bootstrap 响应表中设置列的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆