Question

user@email.comI'我试图在我的内容区域内安装一个引导程序表。我发现Eric Saupe的教程here在th中使用bootstraps默认列类来修复td的宽度，但是在我的firefox中，它看起来并不像上班。我的table位于以下位置：

<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的大小，因为这是最大的，但是将该类放在那里只是不起作用。我究竟做错了什么？任何帮助深表感谢。

Answer 1

如果您只是尝试缩小电子邮件字段，请将该电子邮件col-md-4的{{1}}更改为较小的号码并将其分配到其他位置。我在上面的bootply上测试过，在Firefox或Webkit上没有问题。

Answer 2

所以我最终使用了一些我不喜欢的东西，但它起作用（至少在这种情况下）。我在中等屏幕上遇到空间问题，所以我添加了一个辅助类并将其添加到我的样式表中：

@media (min-width: 992px) {

td.tolong {
    max-width:5em;word-wrap: break-word}
}

break-word属性使表看起来很丑，所以这不是最佳解决方案。但它适用于我的情况。

twitter bootstrap列类在表中不起作用

2 个答案: