使用新的Bootstrap 4,不再可能只需将col-md-2等类应用于表的标签或标签。
因此解决方案似乎在父级中使用class =“d-flex”:
<tr class="d-flex">
但是当我这样做时,我的整个表格不再适合父div。我不能做任何反对它。
有人可以帮我搞清楚吗?
这是表格的代码:
<div class="card-body">
<h3 class="col-12 mt-2">Lehrer</h3>
<table class="table table-light">
<tbody>
<tr class="d-flex">
<td class="col-md-1">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
<tr class="d-flex">
<td class="col-md-1">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-4"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
如果您希望表格单元格填充宽度,请使用12列单位...
<tr class="row mx-0">
<td class="col-md-2">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-6"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
或者,使用ml-auto
将列向右推..
<tr class="row mx-0">
<td class="col-md-2">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1 ml-auto">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>