如何在 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>

bootply

引导程序 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>

bootply

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屋！