Question

我已尽一切努力减小按钮之间的空间，以使它们在移动时都位于工具栏中居中并均匀分布，但由于某种原因，最左侧按钮旁边的空间仍然保留，而最右端的按钮略微位于右边缘，如下图所示。

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

<!-- 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>

我还尝试过创建自定义样式规则（无范围，否则Vuetify似乎会忽略它们），如.v-btn.mobile { margin:0; padding:0 }无效，并尝试所有不同的justify-属性。

除此之外，我还尝试了v-footer等不同的Vuetify元素，并添加了v-container，v-layout和v-flex s。似乎都不起作用。

该图像是我手机的屏幕快照，已连接到同一网络上我PC上的vue开发服务器，以防造成影响。

Answer 1

填充来自vuetify创建的.v-toolbar__content元素。
不幸的是，vuetify并没有提供直接的方法来摆脱这种填充。

不过，您可以使用自定义样式轻松地覆盖此内容：

<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
  <v-toolbar-items>
    <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"
      >
      <v-icon>{{ link.icon }}</v-icon>
    </v-btn>
  </v-toolbar-items>
</v-toolbar>

具有以下样式（假设您使用的是普通CSS）

<style scoped>
.my-toolbar >>> .v-toolbar__content {
  padding: 0;
}
</style>

是的，您不能直接为vuetify生成的元素设置样式，但是可以使用deep selectors来保留scoped样式
（示例中的>>>，如果您使用的是CSS预处理程序，则可能需要使用/deep/或::v-deep）

编辑：要使按钮居中和伸展，您只需要删除v-toolbar-items并为按钮提供block属性和fill-height类，例如：

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

如果您只想将项目居中，则可以使用以下内容：

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

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

1 个答案: