Vuetify：将扩展面板的头部向右对齐

Question

我想使用 Vuetify 扩展面板并将 <div slote="head"></div> 中的部分内容右对齐，以便得到：

但我得到的是这个：

我试过了

float:right , text-align:right

即使是负利润率也没有成功。

Answer 1

重要提示：您的扩展面板似乎没有全宽

这就是您要查找的内容：

<div slot="header">
  <v-layout row>
    <v-flex xs8>
      Item
    </v-flex>
    <v-flex xs4 text-xs-right>
      Item
    </v-flex>
  </v-layout>
</div>

工作示例：https://codepen.io/anon/pen/vbVxaa

Answer 2

有一行 CSS 覆盖了我自己的 CSS。

.v-expansion-panel__header > .v-expansion-panel__header__icon {
  flex: 1 1 auto !important;
}

删除它解决了问题。

Vuetify：将扩展面板的头部向右对齐

Vuetify: align the head of an expansion panel to the right

javascript

css

vue.js

vuetify.js