Bootstrap 垂直对齐单个 div 中的 2 个跨度答案

【问题标题】：Bootstrap vertically align 2 spans within a single divBootstrap 垂直对齐单个 div 中的 2 个跨度
【发布时间】：2021-02-24 20:59:49
【问题描述】：

我正在尝试使用 Bootstrap 和 Bootstrap 图标制作左侧导航卡。左侧显示要导航到的页面的名称，右侧显示一个图标 - 我不知道如何垂直对齐这些项目

请看下面的代码：

<b-list-group>
  <b-list-group-item active to="/home" class="align-items-center">
    <div>
      <span>Home</span>
      <span><b-icon-house class="float-right" /></span>
    </div>
  </b-list-group-item>
</b-list-group>

我也在使用 Vue-Bootstrap，虽然这不会影响任何事情。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您需要使用display: flex 才能使您的对齐正常工作。您可以为此使用d-flex 实用程序类。我还建议避免使用float，而是使用 flexbox 将图标推到右侧。您可以使用实用程序类ml-auto。

<b-list-group>
  <b-list-group-item active to="/home" class="d-flex align-items-center">
    Home
    <b-icon-house class="ml-auto" />
  </b-list-group-item>
</b-list-group>

【讨论】：