将导航项目与BootstrapVue中具有图标的下拉列表对齐

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-navbar-brand href="#">Logo</b-navbar-brand>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/">Home</b-nav-item>
          <b-nav-item-dropdown text="Dropdown">
            <template slot="button-content">
              <b-icon icon="gear"></b-icon>
              Dropdown
            </template>
            <b-dropdown-item>Action 1</b-dropdown-item>
            <b-dropdown-item>Action 2</b-dropdown-item>
            <b-dropdown-item>Action 3</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
import { BNavbar, BNavbarToggle, BNavbarBrand, BCollapse, BNavbarNav, BNavItem, BNavItemDropdown, BDropdownItem, BIcon } from 'bootstrap-vue'

export default {
  components: {
    BNavbar,
    BNavbarToggle,
    BNavbarBrand,
    BCollapse,
    BNavbarNav,
    BNavItem,
    BNavItemDropdown,
    BDropdownItem,
    BIcon
  }
}
</script>