javascript - Vuetify 右对齐按钮组

标签 javascript html vue.js vuejs2 vuetify.js

所以我有一组按钮,我想放在页面的右侧,但是 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>

我看过this问题,但使用文本对齐似乎很麻烦,我想知道是否有更好的解决方案?

最佳答案

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

关于javascript - Vuetify 右对齐按钮组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57769340/

相关文章:

javascript - 如何在 mui v5 Snackbar 中动态创建多个警报

jquery - Bootstrap Screen 自动适应高度内容

html - 带有 float div 作为子元素的父 DIV

javascript - 在 vuejs 中将旧代码修改为 vue router 4

google-analytics - 如何在 VueJS 中跟踪 Google Analytics/Adwords 转化

javascript - 如何使用 Elementor 和 Swiper.js 在帖子 slider 上定位自定义帖子类型

javascript - 无法使用 JQuery 获取 asp.net 元素 Text 属性

javascript - 为什么引导输入微调器的更改事件不起作用?

jquery - 帮我改变这个 JS/Jquery 函数来动态创建 Divs

javascript - 如何使用带有 V-Model 的表单选择中的选项中的文本属性