Html Vuetify v-btn和v-input在v-card-action区域中的布局

我需要一些帮助来校准一些v-btn和v-input。我正在尝试创建一个记录导航控件，我需要它在水平中间对齐。我所拥有的是

我需要的是

我的代码是

          <v-card-action>  
              <v-layout row d-flex class="text-center">
                <div class="my-15 ml-15 text-center">                     
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('first')"
                  >First</v-btn>
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('previous')"
                  >Previous</v-btn>
                  <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

                  <v-btn class="ma-2" text round color="primary" @click="navChange('next')">Next</v-btn>
                  <v-btn class="ma-2" text round color="primary" @click="navChange('last')">Last</v-btn>
                </div>
                <div class="my-15"></div>                  
              </v-layout>                
            </v-card-action>

弗斯特
以前的
下一个
最后

并在

---

我是Vue的新手，似乎有些标准HTML代码在v-card-action区域中不起同样的作用。感谢所有的帮助

如果这样做的话，你就不能简单地将它们包装在

v-card-actions

中

如果仍然没有，请尝试将每个组件放在一列中，并对按钮使用标签

col=“2”

，对输入字段使用标签

col=“4”

，如下所示：

（并使用

v-row

代替

v-layout

）

弗斯特
以前的
下一个
最后

您可以使用

cols

属性来确定元素在一行中应该占用多少空间。最大值为12。因此，如果您希望两个元素在一行中彼此相邻，您可以给它们属性

cols=“6”

，如果您希望一行中有3个元素，那么您可以给它们属性

cols=“4”

（因为12/3=4），等等。您明白了

在更大的屏幕上（

cols

适用于手机），您可以以不同的方式排列元素。例如，如果您为每个元素赋予属性

cols=“12”

，则可以将它们放置在新行中，但如果您希望在平板电脑的同一行中有两个元素，则可以在两个元素上都使用sm=“6”。如果希望元素具有相同的位置，无论屏幕大小如何，只需在所有

col

标记上使用

cols

---

您可以在

上进一步阅读，我已经改进了布局，使其更符合您的目标

主要问题是：

• v-card-actions

  开头标记中的打字错误——actions是复数
• 将按钮容器的

  flex direction

  设置为

  no wrap

  （我用一个

  v-row

  来代替它）
• 按钮上不推荐使用

  round

  道具，因此我们现在需要使用

  round

• 移除

  文本

  道具，这样我们就可以获得按钮的药丸形状和背景色

我还在按钮上设置了一个定义的

宽度

，这样它们的大小都相同，并在按钮容器上添加了左右填充

我建议您全屏查看代码段，这样您就不会看到控制台消息那么显眼了

Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
//
recordNav:“记录：第1条，共15条”
})
})

.centered输入{
文本对齐：居中；
}

弗斯特
以前的
下一个
最后

<v-row class="text-center">
  <div class="my-15 ml-15 text-center">
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('first')"
      >
        First
      </v-btn>
    </v-col>
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('previous')"
      >
        Previous
      </v-btn>
    </v-col>
    <v-col cols="4">
      <v-text-field
        width="10px"
        v-model="recordNav"
        class="centered-input"
      ></v-text-field>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('next')"
      >
        Next
      </v-btn>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('last')"
      >
        Last
      </v-btn>
    </v-col>
  </div>
  <div class="my-15"></div>
</v-row>