Jquery twitter引导列类在表中不起作用

user@email.comI“我正在尝试在我的内容区域中安装一个引导表。我在

th

中找到了Eric Saupe关于使用引导默认列类来固定

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>


名称
组织
任命
住址
办公室电话
居民电话
可移动的
电子邮件
关系
行动
{reference%%中ref的%s}
{{ref.name}
{{ref.organization}
{{ref.designation}}
{{ref.address}}
{{ref.phoneOff}}
{{ref.phoneRes}}
{{ref.mobile}}
user@email.com
{{ref.getRelationReadable}
{%endfor%}

除了bootstrap默认的css之外，我没有任何其他css。我实际上需要调整电子邮件td的大小，因为这是最大的，但是将类放入th中也不起作用。我做错了什么？非常感谢您的帮助
 如果您只是想缩小电子邮件字段，请将该电子邮件
的
col-md-4
更改为较小的数字，然后将其分配到其他位置。我在上面的bootply上进行了测试，Firefox或Webkit上没有问题。
因此我最终使用了一些我不喜欢的东西，但它可以工作（至少在这种情况下）。我在中屏幕中遇到了空间问题，因此我添加了一个助手类，并将其添加到我的样式表中：

@media (min-width: 992px) {

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

break-word
属性使表看起来很难看，因此这不是最佳解决方案。但它在我的情况下是有效的。
所有col md-*值加起来就是13。Bootstrap使用12列布局，所以不确定这将如何布局。我已经构建了一个Bootstrap，它以什么方式不适合您？哎呀……打字错误……我打了四个而不是一个！编辑！：pOK，那么你到底想做什么呢？电子邮件栏应该更小，这是我的目标…不是！你能把你的靴子贴上去吗？我更新了代码，4是一个打字错误。它们都应该是1列。它对我仍然不起作用。我已经用实际的电子邮件替换了“{ref.email}}”字段，所以它仍然很宽。@SamiaRuponti这是DavidG上述引导的一个分支，col-*值更改为1。这似乎就是你想要的