Bootstrap 4：在隐藏多个单元格时避免破坏表格答案

【问题标题】：Bootstrap 4: avoid breaking table when hiding more than one cellBootstrap 4：在隐藏多个单元格时避免破坏表格
【发布时间】：2018-07-31 01:53:46
【问题描述】：

我有一张这样的桌子：

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col" class="d-none d-sm-block">First</th>
      <th scope="col" class="d-none d-sm-block">Last</th>
      <th scope="col" class="d-none d-sm-block">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
  </table>

当使用d-none d-sm-block（在小屏幕上隐藏元素）时，我的整个表格都坏了，我试图隐藏的三个单元格只是相互堆叠。

是我做错了什么，还是这是 BS4 中的错误？

这是一支可以查看的笔：

https://codepen.io/anon/pen/RBxjYo

【问题讨论】：

标签： html-table bootstrap-4

【解决方案1】：

您遇到问题的原因是因为您将显示设置为阻止而不是表格单元格。

class="d-none d-sm-block"

到

class="d-none d-sm-table-cell"

它会正确显示。这将显示所有小或大的东西。如果您希望将其隐藏为小而显示为大于此的所有内容，那么它需要改为这个

class="d-none d-md-table-cell"

【讨论】：