"Vuetify 右对齐按钮组"
[英]Vuetify right align group of buttons
问题描述
So I have a group of buttons that I'd like to be on the right side of the page, but justify-end / justify='end' is not working on v-row .
所以我有一组按钮，我想在页面的右侧，但是justify-end / justify='end'不适用于v-row 。
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-container> <v-form> <v-row justify='end'> <v-col> <v-btn>Button 1</v-btn> <v-btn>Button 1</v-btn> <v-btn>Button 1</v-btn> </v-col> </v-row> </v-form> </v-container> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), }) </script> </body>
I've looked at this question, but using text align seems hacky, and I'm wondering if there is a better solution?我看过这个问题，但使用文本对齐似乎很麻烦，我想知道是否有更好的解决方案？
3 个解决方案
解决方案1
28 2019-09-03 10:28:44
Add the text-right class to <v-col> :将text-right类添加到<v-col> ：
<v-col class="text-right">
<v-btn>Button 1</v-btn>
<v-btn>Button 2</v-btn>
<v-btn>Button 3</v-btn>
</v-col>
解决方案2
4 2019-09-03 10:22:32
Without changing the grid system try to add <spacer/> component in order to put v-col to the end of row like :在不改变网格系统的情况下尝试添加<spacer/>组件以便将v-col放在行的末尾，例如：
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-container tag="div"> <v-form> <v-row justify="end"> <spacer/> <v-col> <v-btn>Button 1</v-btn> <v-btn>Button 1</v-btn> <v-btn>Button 1</v-btn> </v-col> </v-row> </v-form> </v-container> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), }) </script> </body>
解决方案3
0 2022-02-04 05:38:42
You have to use justify-end in a class on a v-row to get it to work.您必须在 v-row 的类中使用 justify-end 才能使其工作。 You can't use it on a v-col.您不能在 v-col 上使用它。 DOCS: https:\/\/vuetifyjs.com\/en\/api\/v-row\/<\/a> You may need to play around with the spacing depending on where you put them but you can use the class to do that to avoid any styles. DOCS： https<\/a> :\/\/vuetifyjs.com\/en\/api\/v-row\/ 您可能需要根据放置它们的位置来调整间距，但您可以使用该类来避免任何样式。
<v-form>
<v-row class="justify-end">
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
</v-row>
</v-form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.