Question

我有一个如下所示的引导表：

您可以看到第一列的文本不合适。如何使第一列文字适合该列？

代码如下：

<div class="row">
        <div class="col-md-12">
            <div class="portlet light ">
                <div class="portlet-body">
                    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="matches_table">
                        <tbody>
                            {% for field, value in object.items %}
                            <tr class="odd gradeX">
                                <td width=""><b>{{ field|field_name_split|title }}</b></td>
                                <td width="">{{ value }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

Answer 1

您的代码，没有。在下面，我添加了一个示例表引导程序代码。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="container">
            <h2>Hover Rows</h2>
            <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>            
            <table class="table table-striped table-bordered table-hover table-checkable order-column">
                <thead>
                  <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

谢谢

引导表文本不适合

1 个答案: