在Bootstrap 4中，隐藏两个相邻的列移动堆叠它们。我怎样才能防止这种情况发生？

Question

在移动设备上使用 d-none d-md-block 隐藏单个列效果很好，但如果我想在移动设备上隐藏两个相邻的列，它们会在桌面上堆叠显示。

 <table width="80%" class="tabTable table-bordered table-striped table-hover">
   <tr><th class="d-none d-md-block">Col 1</th><th class="d-none d-md-block">Col 2</th><th>Col 3</th></tr>
   <tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
   <tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
</table>

结果像

添加样式="vertical-align:top;"前两列中的 <th> 和 <td> 似乎无法解决问题。

Answer 1

td 默认有 display:table-cell;。 d-md-block 将其 display 更改为 block。块元素占用所有可用的 space.

因为其中一个 td 有 display:table-cell; 而另外两个有 display:block，所以他们看起来是这样。

每个地方都使用 d-md-table-cell 而不是 d-md-block。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table width="80%" class="tabTable table-bordered table-striped table-hover">
  <tr>
    <th class="d-none d-md-table-cell">Col 1</th>
    <th class="d-none d-md-table-cell">Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td class="d-none d-md-table-cell">Val 1</td>
    <td class="d-none d-md-table-cell">Val 2</td>
    <td>Val 3</td>
  </tr>
  <tr>
    <td class="d-none d-md-table-cell">Val 1</td>
    <td class="d-none d-md-table-cell">Val 2</td>
    <td>Val 3</td>
  </tr>
</table>

在Bootstrap 4中，隐藏两个相邻的列移动堆叠它们。我怎样才能防止这种情况发生？

In Bootstrap 4, hiding two adjacent columns on mobile stacks them. How can I prevent this?

bootstrap-4