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 中也不起作用。我究竟做错了什么?任何帮助深表感谢。
最佳答案
如果您只是想缩小电子邮件字段,请更改 col-md-4
该电子邮件 <th>
分配给一个较小的数字并将其分配到其他地方。我在上面的 bootply 上测试过,在 Firefox 或 Webkit 上没有问题。
关于jquery - Twitter Bootstrap 列类在表中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25609709/