Javascript Vue，Vuetify-减少工具栏中按钮之间的空间

我已经尽了一切努力缩小按钮之间的空间，这样当使用手机时，它们都可以很好地居中放置，并在工具栏上均匀分布，但由于某些原因，最左侧按钮旁边的空间仍然存在，而最右侧按钮略高于右边缘，如下图所示

这是我来问问题之前最后一件事：

<!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere -->
<v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0">
    <v-toolbar-items class="ma-0 pa-0">
        <v-btn 
            flat 
            v-for="link in navigation" 
            :key="link.text" 
            :class="{ 'teal lighten-2':link.active }" 
            @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
            class="mobile ma-0 pa-0"
        >
            <v-icon>{{ link.icon }}</v-icon>
        </v-btn>
    </v-toolbar-items>
</v-toolbar>

{{link.icon}

我还尝试过创建自定义样式规则（无范围，否则Vuetify似乎会忽略它们），例如

.v-btn.mobile{margin:0；padding:0}

，但没有效果，还尝试了所有不同的

justify-

属性

除此之外，我还尝试了不同的Vuetify元素，比如

v-footer

，并添加了

v-container

s、

v-layout

s和

v-flex

s。这些似乎都不管用

---

该图像是我手机上的屏幕截图，同时连接到同一网络上我电脑上的vue dev服务器，以防出现差异。

填充来自vuetify创建的

.v-toolbar\u content

元素。
不幸的是，vuetify没有提供一种直接的方法来消除这种填充

但是，您可以使用自定义样式轻松替代此选项：

{{link.icon}

使用以下样式（假设您使用的是纯css）

.my toolbar>>>.v-toolbar\u内容{
填充：0；
}

没错，您不能直接为vuetify生成的元素设置样式，但可以使用
（示例中的

>

如果使用css预处理器，则可能需要使用

/deep/

或

：：v-deep

）

编辑：对于居中和拉伸按钮，您只需删除

v-toolbar-items

，并为按钮赋予

block

属性和

填充高度

类，例如：

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    block
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

{{link.icon}

如果您只想将项目居中，可以使用以下方法：

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-btn 
    flat
    v-for="link in navigation" 
    :key="link.text" 
    :class="{ 'teal lighten-2':link.active }"
    @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
    class="mobile fill-height ma-0"
  >
    <v-icon>{{ link.icon }}</v-icon>
  </v-btn>
</v-toolbar>

<!-- with the following style: -->
<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
  justify-content: center;
}
</style>

{{link.icon}
.my toolbar>>>.v-toolbar\u内容{
填充：0；
证明内容：中心；
}

嘿，太好了！谢谢你的深刻提示，我甚至不知道这是一件事。D'ya也许还知道一种方法，我现在可以在导航内将按钮居中（或者直接将它们居中，或者在导航上均匀地将它们隔开）？因为目前所有的按钮都聚集在左侧。@PrintlnParams我又添加了两个关于如何使按钮拉伸或居中的示例：）你简直就是炸弹。非常感谢。