在 Vuetify 工具栏中右对齐 <v-btn text>

Question

我正在尝试右对齐 Vuetify 工具栏中的最后两个按钮，但没有运气。我尝试分配课程text-right 以及我自己的课程float: right 等等。我缺少一个简单的解决方案吗？

    <v-toolbar 
      :dense="true"
      :flat="true"
      :color="'blue darken-4'"
      :dark="true"
    >
     <v-toolbar-items>
        <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
        <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
        <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
        <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
        <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
        <v-btn text><img class='icon' src="../images/box.png">Inventory</v-btn>
        <v-btn text><img class='icon' src="../images/legend.png">Leadership</v-btn>
        <v-btn text><img class='icon' src="../images/seiu.png">Learning</v-btn>
        <v-btn text><img class='icon' src="../images/search.png">Search</v-btn>
        <v-btn text class="text-right">Username</v-btn>
        <v-btn text class="text-right">Logout</v-btn>
      </v-toolbar-items>
    </v-toolbar>

现在看起来是这样的：

我希望“用户名”和“注销”文本一直位于右侧。

Answer 1

您可以使用以下更改来满足要求

根据第一个示例中的toolbars docs，您可以看到他们正在使用<div class="flex-grow-1"></div> 来右对齐图标。

<v-toolbar :dense="true" :flat="true" :color="'blue darken-4'" :dark="true">
  <v-toolbar-items>
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
  </v-toolbar-items>

  <div class="flex-grow-1"></div>

  <v-toolbar-items>
    <v-btn text>Username</v-btn>
    <v-btn text>Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

您也可以通过在现有代码中使用以下 css 来实现

.text-right {
  float: right;
}

.custom_cls {
  display: block;
  width: 100%;
}

<v-toolbar :dense="true" :flat="true" :color="'yellow darken-4'" :dark="true">
  <v-toolbar-items class="custom_cls">
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
    <v-btn text class="text-right">Username</v-btn>
    <v-btn text class="text-right">Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

您可以在这里查看工作demo。

Answer 2

在最后两个"<v-btn>"之前插入"<v-spacer />"标签
文档：https://vuetifyjs.com/en/components/grids