jquery - Twitter Bootstrap 列类在表中不起作用

Question

user@email.com我正在尝试在我的内容区域中放置一个 Bootstrap 表。我找到了 Eric Saupe 的教程 here关于在 th 中使用 Bootstrap 默认列类来固定 td 的宽度，但在我的 firefox 中，它似乎不起作用。我的表如下:

<div class="row">
            <div class="col-md-10 p-l-xlg">


                <table class="records_list table table-condensed table-striped table-bordered">
                    <thead>
                    <tr>

                        <th class="col-md-1">Name</th>
                        <th class="col-md-1">Organization</th>
                        <th class="col-md-1">Designation</th>
                        <th class="col-md-1">Address</th>
                        <th class="col-md-1">Office Phone</th>
                        <th class="col-md-1">Resident Phone</th>
                        <th class="col-md-1">Mobile</th>
                        <th class="col-md-1">Email</th>
                        <th class="col-md-1">Relation</th>
                        <th class="col-md-1">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for ref in reference %}
                        <tr>
                            <td>{{ ref.name }}</td>
                            <td>{{ ref.organization }}</td>
                            <td>{{ ref.designation }}</td>
                            <td>{{ ref.address }}</td>
                            <td>{{ ref.phoneOff }}</td>
                            <td>{{ ref.phoneRes }}</td>
                            <td>{{ ref.mobile }}</td>
                            <td>user@email.com</td>
                            <td>{{ ref.getRelationReadable }}</td>

                            <td>
                                <a  href="{{ path('applicant_profile_reference_edit', { 'id': ref.id }) }}"  class="btn btn-login editlightbox">
                                    <i class="glyphicon glyphicon-pencil"></i> Edit</a>

                            </td>

                        </tr>
                    {% endfor %}
                    </tbody>


                </table>
        </div>

除了 bootstrap 默认情况下，我没有为这个表添加任何额外的 css。我实际上需要调整电子邮件 td 的大小，因为它是最大的，但是仅将类(class)放在那个 th 中也不起作用。我究竟做错了什么？任何帮助深表感谢。

Answer 1

如果您只是想缩小电子邮件字段，请更改 col-md-4该电子邮件 <th>分配给一个较小的数字并将其分配到其他地方。我在上面的 bootply 上测试过，在 Firefox 或 Webkit 上没有问题。