使 Bootstrap 4 中的 flex 类占据表单元父级的全高

Question

我正在使用 Bootstrap 4 CSS 和 JS（来自官方 CDN），以及 Font Awesome 5（也是官方 CDN）。

我最初使用 Bootstrap 中的 text-center 类，因为 FA5 图标只是文本。然后我尝试使用text-justify 使图标在更大宽度的显示器上分散得更好，但这根本不起作用。

这是标记的表格单元格部分。我不想在此处粘贴整个内容，因为模板 (Jinja2) 相当长。

<td>
  <div class="container-fluid d-flex justify-content-between">
    <i class="fas fa-fw fa-chevron-up"></i>
    <i class="fas fa-fw fa-chevron-down"></i>
    <i class="fas fa-fw fa-star"></i>
  </div>
</td>

表格单元格按预期显示，但不是全高并且图标看起来偏离中心。

有没有人有一个相当简单的方法来使d-flex 元素使用父单元格的整个高度？或者只是一种更好的方式来使赞成、反对和最喜欢的图标很好地适合表格单元格？我还需要想办法让当前的分数/收藏夹数字与表格中的所有其他单元格对齐。您拥有的任何现有解决方案或建议也会非常有帮助。

编辑：事后我应该补充一点，如果有影响的话，这些图标最终会出现在按钮内部。

谢谢。

Answer 1

使用 align-items-center 引导类来对齐单元格的元素中心。如果您使用任何自定义行高，请删除它。

<td>
      <div class="container-fluid d-flex justify-content-between align-items-center">
        <i class="fas fa-fw fa-chevron-up"></i>
        <i class="fas fa-fw fa-chevron-down"></i>
        <i class="fas fa-fw fa-star"></i>
      </div>
    </td>

注意：我不清楚这个问题。我提供了将您的 fa 图标垂直居中对齐到单元格的解决方案。希望你也问同样的问题......

Answer 2

您说图标最终会出现在按钮内部。为什么不使用按钮组？或者使用引导程序 col 类来对齐事物。将按钮的高度设置为 100% 以占据单元格的整个高度。 两种想法如下所示。

希望对你有帮助

td{
  height: 100px;
}
.btn, .btn-group{
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
      <tbody>
        <tr>
          <td>
            <div>
            	<span class="col-sm-4">
	          <i class="fas fa-fw fa-chevron-up"></i>
            	</span>
            	<span class="col-sm-4">
                  <i class="fas fa-fw fa-chevron-down"></i>
            	</span>
            	<span class="col-sm-4">
                  <i class="fas fa-fw fa-star"></i>
            	</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn btn-light">
                <i class="fas fa-fw fa-chevron-up"></i>
              </button>
              <button type="button" class="btn btn-light">
                <i class="fas fa-fw fa-chevron-down"></i>
              </button>
              <button type="button" class="btn btn-light">
                <i class="fas fa-fw fa-star"></i>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>


  <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 3

为什么将.container-fluid 与.d-flex 一起使用？为容器流体类使用另一个父标签。