Html 如何在 Bootstrap 响应表中设置列的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25385289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the size of a column in a Bootstrap responsive table
提问by Brendan Vogt
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.
如何在 Bootstrap 响应式表中设置列的大小？我不希望桌子失去响应功能。我也需要它在 IE8 中工作。我已经包含了 HTML5SHIV 和 Respond。
I'm using Bootstrap 3 (3.2.0)
我正在使用 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>
回答by Jordan.J.D
Bootstrap 4.0
引导程序 4.0
Be aware of all migrationchanges from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xsto allow bootstrap to automatically detect the viewport.
请注意从 Bootstrap 3 到 4的所有迁移更改。在表上，您现在需要通过添加类来启用弹性框d-flex，并删除xs以允许引导程序自动检测视口。
<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
引导程序 3.2
Tablecolumn width use the same layout as gridsdo; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12in this example.
表格列宽使用与网格相同的布局；使用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>
Remember to set the <th>elements rather than the <td>elements so it sets the whole column. Here is a working BOOTPLY.
请记住设置<th>元素而不是<td>元素，以便它设置整个列。这是一个有效的BOOTPLY。
Thanks to @Dan for reminding me to always work mobile view (col-xs-*) first.
感谢@Dan 提醒我始终首先使用移动视图 ( col-xs-*)。
回答by Dan
You could use inline styles and define the width in the <th>tag. Make it so that the sum of the widths = 100%.
您可以使用内联样式并在<th>标签中定义宽度。使其宽度总和 = 100%。
<tr>
<th style="width:10%">Size</th>
<th style="width:30%">Bust</th>
<th style="width:50%">Waist</th>
<th style="width:10%">Hips</th>
</tr>
Bootply demo
Bootply 演示
Typically using inline styles is not ideal, however this does provide flexibility because you can get very specific and granular with exact widths.
通常使用内联样式并不理想，但是这确实提供了灵活性，因为您可以获得非常具体和精确的宽度。
回答by dev
you can use the following Bootstrap class with
您可以使用以下 Bootstrap 类
<tr class="w-25">
</tr>
for more details check the following page https://getbootstrap.com/docs/4.1/utilities/sizing/
有关更多详细信息，请查看以下页面 https://getbootstrap.com/docs/4.1/utilities/sizing/
