v-toolbar组件分别具有default leftright padding 24px(台式机版本)。它不能被覆盖。

我已经尝试过Vuetify的间距助手(pa-0,ma-0),但他们所做的只是将徽标推到填充物下方(您可以在图片中看到)。我也尝试过CSS类(padding-left:0,padding:0)。但是填充保持在那里。通过使用DevTools,我发现它使用的类是“ v-toolbar__content”,因此在<style></style>部分中,我尝试了padding:0 and padding-left:0,但未进行任何更改。

<v-toolbar>
 <v-toolbar-title class="pa-0">
  <span>
   <v-avatar size="40px" tile>
    <img src="https://cdn.pixabay.com/photo/2016/08/25/07/30/red-1618916_960_720.png" />
    <h1>Title</h1>
    </v-avatar>
   </span>
 </v-toolbar-title>
</v-toolbar>


因此,当我添加class =“ pa-0”或class =“ pl-0”或覆盖“ v-toolbar__content”类的填充时,我期望填充消失,但不会消失。
Here is an example in sandbox.io editor.
css - 无法从Vuetify的工具栏组件中删除左/右填充(间距助手不起作用)-LMLPHP

最佳答案

这样解决了。
覆盖v-toolbar__content css类无法正常工作,因为我在样式标签中使用了“ scoped”关键字。一旦我删除了它,它就会起作用并删除了填充。

<style>
    .v-toolbar__content {
      padding-left: 0px;
    }
</style>

10-05 20:45
查看更多