Question

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

示例：

当屏幕为eXtra Small＆lt; 576px时，我想要显示2列
当屏幕是MeDium≥768px时，我想要显示4列
当屏幕超大≥1200时，我想要显示6列。

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

<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类时，它应该有效。

全屏运行代码段以查看媒体查询是否有效，或查看更新后的小提琴：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>

Bootstrap4隐藏显示列

1 个答案: