我无法让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