Макет для таблицы с использованием Bootstrap 4.2 не выравнивается, как ожидалось - PullRequest
Новая
       119

Макет для таблицы с использованием Bootstrap 4.2 не выравнивается, как ожидалось

0 голосов
/ 11 января 2019

В процессе перехода от 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>

В моей системе столбцы, показывающие QTY, слишком малы, чтобы увидеть полное число, даже число 1.

UPDATE

Я изменил заголовки на col-sm-4, и результаты во многом совпадают. Вот изображение результата:

Table in runtime

ОБНОВЛЕНИЕ 2

Предложено добавить класс ROW к <tr>, в результате:

enter image description here

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Я хотел бы завершить это решением, которое сработало для меня. Это было просто исправить. В разделе <thead> таблицы я удалил тег col-sm-3, и таблица вела себя как ожидалось.

Спасибо всем!

0 голосов
/ 11 января 2019

Вы можете попробовать добавить 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>
...