html - Bootstrap4 隐藏显示列

Question

我需要能够根据屏幕尺寸隐藏/显示列。

例子:

• 当屏幕非常小 <576px 时，我想要显示 2 列
• 当屏幕为 MeDium ≥768px 时，我想要显示 4 列
• 当屏幕超大 ≥1200 时，我想要显示 6 列。

有几百行，所以我不需要 3 个表，只需要根据大小显示或隐藏的列。

JS fiddle 在: https://jsfiddle.net/tkcynbjk/

<div class="row">
    <div class="col-sm-12">
        <table class="table table-striped">
            <thead>
            <tr>
                <th class="d-none d-table-cell" scope="col">ALWAYS 1</th>
                <th class="d-none d-table-cell" scope="col">ALWAYS 2</th>
                <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 1</th>
                <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 1</th>
                <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 2</th>
                <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 2</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

当您删除 d-table-cell 类时它应该可以工作。

全屏运行代码片段以查看媒体查询的工作情况，或查看更新后的 fiddle :https://jsfiddle.net/jkrielaars/tkcynbjk/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th class="" scope="col">ALWAYS 1</th>
                    <th class="" scope="col">ALWAYS 2</th>
                    <th class="d-none d-md-table-cell" scope="col">MED 1</th>
                    <th class="d-none d-xl-table-cell" scope="col">XL ONLY 1</th>
                    <th class="d-none d-md-table-cell" scope="col">MED 2</th>
                    <th class="d-none d-xl-table-cell" scope="col">XL ONLY 2</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td  class="d-none d-md-table-cell">C</td>
                        <td class="d-none d-xl-table-cell">D</td>
                        <td class="d-none d-md-table-cell">E</td>
                        <td class="d-none d-xl-table-cell">F</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>