时间戳

首页 > 解决方案 > Bootstrap 4表格单元格垂直对齐似乎不像文档建议的那样工作

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

问题描述

我无法让 Bootstrap 4 垂直对齐表格数据单元格顶部的单词“top”。文档看起来很清晰/简单。他们为表格推荐 align-text-top，对于跨度，他们推荐 align-top。在我下面的示例中都不起作用。当我查看开发人员工具栏时，bootstrap 中的表类定义应用了vertical-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>

标签： bootstrap-4

解决方案

默认情况下，引导表单元格顶部对齐。（在开发人员工具中检查 atd将确认这一点。）这些表格单元格出现中间对齐只是因为文本太短而无法触发自动换行。如果您为这些单元格中的任何一个提供足够的文本以换行到第二行，则相邻单元格中的文本将随着行高的增加而保持在顶部附近。

<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 的默认填充 0.75rem。

推荐阅读