按钮未展开以填充表格单元格

Question

我正在使用Bootstrap 4，并尝试将按钮放在每一行的表格单元格中。但是按钮并没有扩大以填充该区域。他们似乎被压扁了。当我缩小到移动设备时，会发生同样的事情。

从屏幕截图中可以看到，动作单元有足够的空间。但是按钮格式错误。

有人能看到我在做什么吗？

<table class="table table-striped small">
  <thead>
    <tr>

      <th>Status</th>
      <th class="d-none d-sm-table-cell">Tax ID</th>
      <th class="d-none d-sm-table-cell">Contractor ID</th>
      <th class="d-none d-sm-table-cell">Account</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Unregistered</td>
      <td class="d-none d-sm-table-cell">123456789</td>
      <td class="d-none d-sm-table-cell">4113223</td>
      <td class="d-none d-sm-table-cell">N/A</td>
      <td class="text-center bg-danger">
        <a href="#" class="btn btn-info  text-white"><i class="fas fa-vial d-none d-sm-none d-md-block"></i> <span class="d-none d-sm-none d-md-block">Create</span> Test Call</a>
        <a href="#" class="btn btn-success   text-white"><i class="fas fa-sign-in-alt d-none d-sm-none d-md-block"></i> LogIn</a>
        <a href="#" class="btn btn-danger  text-white"><i class="fas fa-sign-out-alt d-none d-sm-none d-md-block"></i> LogOut</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

答案：display: block。默认情况下，锚元素设置为inline显示。

来自MDN：

  

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

Answer 2

尝试将btn-block css类添加到每个按钮。

<a href="#" class="btn btn-info btn-block text-white"><i class="fas fa-vial d-none d-sm-none d-md-block"></i> <span class="d-none d-sm-none d-md-block">Create</span> Test Call</a>