使用 BootstrapVue 实现由下拉组成的用户头像

Question

我正在使用 Vue2 并使用 BootstrapVue 进行样式设置
我想要实现的如下所示：

但是，我尝试了自己，甚至在文档中查找了示例，
我不知道为什么结果是垂直对齐（我认为默认情况下它会是水平对齐）。

这是我的 html 代码的一部分

<b-navbar-nav>
  <b-nav-item-dropdown text="User" left clas="user">
      <template #button-content>
        <div class="profile">
          <b-icon icon="person-fill"></b-icon>
        </div>
        <p>Username</p>
      </template>

      <b-dropdown-item>
        <router-link to="/login">Login</router-link>
      </b-dropdown-item>
      <b-dropdown-item>
        <router-link to="/register">Register</router-link>
      </b-dropdown-item>
      <b-dropdown-item>
        <router-link to="/logout">Logout</router-link>
      </b-dropdown-item>
   </b-nav-item-dropdown>
</b-navbar-nav>

jsfiddle

Answer 1

要修复它，您需要将内容包装在b-row中，这样它就不会溢出。 这对我有用：

<b-nav-item-dropdown text="User" left clas="user" no-caret>
      <template #button-content>
        <b-row>
          <div class="profile">
            <b-icon icon="person-fill"></b-icon>
          </div>
          <p>Username</p>
          <b-icon icon="caret-down-fill"></b-icon>
        </b-row>
      </template>

      <b-dropdown-item>
        <router-link to="/login">Login</router-link>
      </b-dropdown-item>
      <b-dropdown-item>
        <router-link to="/register">Register</router-link>
      </b-dropdown-item>
      <b-dropdown-item>
        <router-link to="/logout">Logout</router-link>
      </b-dropdown-item>
</b-nav-item-dropdown>