Bootstrap 4 表格单元格垂直对齐似乎不像文档建议的那样工作



我无法让Bootstrap 4垂直对齐单词";顶部";位于表格数据单元格的顶部。文档看起来很清晰/简单。他们建议将表格的文本顶部对齐,而对于跨度,他们建议将顶部对齐。在我下面的例子中,两者都不起作用。当我在开发人员工具栏中查看时,Bootstrap中的表类定义应用了垂直aign:top,但在这种情况下,浏览器(Chrome(不支持它。我错过了什么?

<table class="table">
<thead class="thead-light">
<tr>
<th scope="col" class="w-50">Something</th>
<th class="w-50"></th>
</tr>
</thead>
<tbody>
<tr style="line-height: 40px;">
<td><span class="align-top">top</span> </td>
<td class="align-text-top">top </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Contact (if other than owner): </td>
<td>Contact (if other than operator): </td>
</tr>
<tr>
<td>Mailing Address: </td>
<td>Mailing Address: </td>
</tr>
<tr>
<td>City, State, Zip: </td>
<td>City, State, Zip: </td>
</tr>
</tbody>
</table>

引导表单元格默认为顶部对齐。(在开发工具中检查td可以确认这一点。(这些表格单元格显示为居中对齐,只是因为文本太短,无法触发换行。如果给其中任何一个单元格足够的文本以换行到第二行,则随着行高的增加,相邻单元格中的文本将保持在顶部附近。

<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua.
</td>
<td>Top</td>
</tr>

但是,如果你只想在单元格中把文本放得更高,而不考虑文本长度,你可以给任何td实用程序类(如pt-0 pb-3(来覆盖Bootstrap的默认填充.75rem

最新更新