时间戳

首页 > 解决方案 > Bootstrap 垂直对齐单个 div 中的 2 个跨度

html - Bootstrap 垂直对齐单个 div 中的 2 个跨度

问题描述

我正在尝试使用 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，尽管这不会影响任何事情。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

您需要使用display: flexalign 才能正常工作。您可以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>

推荐阅读