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

Question

我正在尝试右对齐 Vuetify 工具栏中的最后两个按钮，但没有成功。我已经尝试分配 class text-right 以及我自己的 class ，其中 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>

现在看起来像这样：

我希望 "username" 和 "logout" 文本一直在右边。

Answer 1

您可以使用以下更改来实现要求

As per toolbars docs in first example, you can see they are using <div class="flex-grow-1"></div> to right align the icons.

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

And you could also achieve by using below css in your exiting code

.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

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

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

Right Align <v-btn text> in Vuetify Toolbar

toolbar

vue.js

vuetify.js