右对齐组件与Vuetify.js

问题描述 投票:1回答:1

我正试图在Vuetify网格中右对齐一组单选按钮:

<v-layout row wrap align-start justify-end fill-height>
   <v-flex xs12 class="text-xs-right">
      <v-radio-group row hide-details>
         <v-radio label="Public"></v-radio>
         <v-radio label="Private"></v-radio>
      </v-radio-group>                    
   </v-flex>
</v-layout>

他们总是留在那里。如何实现正确的对齐?

小提琴:

https://jsfiddle.net/80mq5rhf/

vuejs2 vuetify.js
1个回答
2
投票

你可以把<v-spacer>放在你的<v-radio-group>里面。这将填充按钮左侧的可用空间。

<v-radio-group row>
  <v-spacer></v-spacer>
  <v-radio label="Public"></v-radio>
  <v-radio label="Private"></v-radio>
</v-radio-group>

另一种方法是为你的<v-flex>添加一个偏移量

<v-flex xs12 offset-xs8>
  <v-radio-group row>
    <v-radio label="Public"></v-radio>
    <v-radio label="Private"></v-radio>
  </v-radio-group>                    
</v-flex>
© www.soinside.com 2019 - 2024. All rights reserved.