layout - 使用 Bootstrap 4.2 的表格布局未按预期对齐

Question

在从 Bootstrap 3 迁移到 Bootstrap 4.2 的过程中。我在 Ajax 模式屏幕中有一个表格。这是代码片段：

<div class="card-body">
    <div class="row">
        <table class="table table-hover table-responsive-lg">
            <thead>
                <tr>
                    <td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
                    <td class="text-center col-sm-3"><strong>QTY</strong></td>
                    <td class="text-center col-sm-3"><strong>RATE</strong></td>
                    <td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
                    <td class="text-center ">
                        <asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
                    <td class="text-center ">
                        <asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
                    <td class="text-center ">
                        <asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

在我的系统中，显示数量的列太小而无法看到完整的数字，即使是数字 1。

更新

我将标题更改为 col-sm-4，结果大致相同。这是结果的图像：

更新 2

建议在<tr>结果中添加 ROW 类：

标签： layouthtml-tablebootstrap-4

Answer 1

我想用一个对我有用的解决方案来解决这个问题。解决起来很简单。在<thead>表格的部分中，我删除了 col-sm-3 标记，表格的行为符合预期。

感谢大家！