在 Bootstrap 4 中，在移动设备上隐藏两个相邻的列会将它们堆叠起来。我怎样才能防止这种情况？答案

【问题标题】：In Bootstrap 4, hiding two adjacent columns on mobile stacks them. How can I prevent this?在 Bootstrap 4 中，在移动设备上隐藏两个相邻的列会将它们堆叠起来。我怎样才能防止这种情况？
【发布时间】：2022-01-28 04:02:51
【问题描述】：

使用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>

出来像

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

【问题讨论】：

这是复制品吗？ stackoverflow.com/questions/9273016/…
另外，是否可以使用这种类型的划分，或者您需要表格格式吗？

仅凭个人经验，所有的 td 和 trs 以及在您的 IDE 中不会变得不堪重负的东西并且它只是在视觉上更容易处理您的 CSS 样式的非表格数据，而不是作为一种解决方案。
不幸的是，这很难重组 - 我希望在链接答案中的 td 和 th 中有一个修复。
你的提示很有帮助@easleyfixed - 请参阅下面的评论接受答案和谢谢。

标签： bootstrap-4

【解决方案1】：

td 默认具有display:table-cell;。 d-md-block 将其 display 更改为 block。块元素占据所有可用空间。

由于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>

【讨论】：

还发现：如果将d-md-block 更改为d-md-inline，使用vertical-align:top 将工作。感谢@easleyfixed。
@ScottCWilson 您不需要使用d-md-inlne，因为它将display 设置为inline。
但是没有这个，它怎么知道在小屏幕和xs屏幕上隐藏呢？