引导表文本不适合答案

【问题标题】：Bootstrap table text doesnt fit引导表文本不适合
【发布时间】：2019-03-08 21:44:33
【问题描述】：

我有如下所示的引导表：

如您所见，第一列的文字不合适。如何使第一列文本适合该列？

代码如下：

<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>

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案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>

谢谢，

【讨论】：