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，结果几乎相同。这是结果的图像：

Table in runtime

更新2

建议将ROW类添加到<tr>中会导致：

enter image description here

Answer 1

您可以尝试将class="row"添加到每个tr而不是外部div

示例：

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
    <div style="width: 572px;">
        <div class="card-body"> 
            <div class="">
                <table class="table table-hover table-responsive-lg">
                    <thead>
                        <tr class="row">
                            <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 class="row">
                            <td class="col-sm-3 text-center "><asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
                            <td class="text-center col-sm-3">
                                <asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
                            <td class="text-center col-sm-3">
                                <asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
                            <td class="text-center col-sm-3">
                                <asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>

</body>
</html>

Answer 2

I wanted to close this out with a solution that worked for me. It was simple to fix. In the <thead> section of the table I removed the col-sm-3 tag and the table behaved as expected.

Thanks everyone!

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

2 个答案: