在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，您可以看到它们使用fig.update_layout(shapes=[dict(type="line", x0=11, x1=14, y0=3, y1=4)]) 来使图标右对齐。

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

  

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

<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>

.text-right {
  float: right;
}

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

您可以在这里使用demo进行检查。

Answer 2

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