从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 bootstrap类来对齐单元格的元素中心。如果您使用任何自定义行高，请删除它。

<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

你说图标最终会在按钮内。为什么不使用按钮组？或者使用bootstraps 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？对容器流体类使用另一个父标记。