我正在尝试这样做,但无法在两个底角设置两个按钮。以下代码并排保持两个按钮。但我需要一个按钮在左边,另一个在右边。
<v-card-actions>
<v-spacer />
<v-btn color="primary" v-on:click="gotosignup">SignUp</v-btn>
<v-btn color="primary" v-on:click="gotohome">Login</v-btn>
</v-card-actions>
]
我正在尝试这样做,但无法在两个底角设置两个按钮。以下代码并排保持两个按钮。但我需要一个按钮在左边,另一个在右边。
<v-card-actions>
<v-spacer />
<v-btn color="primary" v-on:click="gotosignup">SignUp</v-btn>
<v-btn color="primary" v-on:click="gotohome">Login</v-btn>
</v-card-actions>
]
v-card-actions
是flexbox。只需ml-auto
在第二个 btn 上使用...
<v-card>
<v-card-actions>
<v-btn color="primary">SignUp</v-btn>
<v-btn color="primary" class="ml-auto">Login</v-btn>
</v-card-actions>
</v-card>
或者, justify-space-between
在容器上...
<v-card>
<v-card-actions class="justify-space-between">
<v-btn color="primary">SignUp</v-btn>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
</v-card>
您可以使用响应式 flexbox 实用程序轻松实现此目的,例如:
<v-card-actions>
<v-spacer class="d-flex justify-space-between align-end" />
<v-btn color="primary">SignUp</v-btn>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
演示:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.spacer{height:90vh}
<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@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card-actions>
<v-spacer class="d-flex justify-space-between align-end" />
<v-btn color="primary">SignUp</v-btn>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
</v-app>
</div>