Bootstrap 4 响应式表头对齐问题答案

【问题标题】：Bootstrap 4 responsive table header alignment issueBootstrap 4 响应式表头对齐问题
【发布时间】：2021-03-28 10:07:45
【问题描述】：

我在响应式表格上使用类 d-none 和 d-md-block 来隐藏较小分辨率的特定列。它工作得很好，但有一个例外。使用这些类的列与其他列略有不同。检查该列时，我找不到任何可能导致此问题的规则。

似乎这些列的填充或边距可能偏离了几个像素，但我终其一生都无法确定。填充和边距似乎与非响应列相同。下面是一个问题示例：

您可以在https://bitmagi.com/ 查看代码，然后单击“交易/添加交易”菜单。

【问题讨论】：

我认为您需要使用表格显示和隐藏类。当您像 d-md-block 一样将其设置为显示块时，您会更改元素显示。 getbootstrap.com/docs/4.0/utilities/display

【解决方案1】：

问题是由d-md-block 引起的。这样做是使表格单元格变成块元素，这不是<th> 的默认行为。因此间距问题。

解决方案：使用d-md-table-cell 而不是d-md-block

工作示例：

<th class="d-none d-md-table-cell" style="text-align: right;">Exchange</th>

【讨论】：