将导航项与在BootstrapVue中具有图标的下拉菜单对齐

Question

当我在b-nav-item-dropdown中放置一个图标时，导航栏的垂直对齐会损坏：

<b-navbar-nav class="ml-auto">
  <b-nav-item :to="{ name: 'sign-in'}">Sign in</b-nav-item>
        <b-nav-item-dropdown toggle-class="text-warning" right>
          <template v-slot:button-content>
            <b-icon-info font-scale="2"></b-icon-info>
          </template>
          <b-dropdown-item :to="{ name: 'help'}">Help</b-dropdown-item>
        </b-nav-item-dropdown>

我如何对齐它们？有BootstrapVue本机方式吗？导航组件缺少align-v属性。

Answer 1

不是使用font-scale（这会增加图标的字体大小），而是使用scale道具，该道具使用CSS变换来增加图标的大小而无需更改字体大小。

          <template v-slot:button-content>
            <b-icon-info scale="2"></b-icon-info>
          </template>