v-toolbar组件分别具有default left
和right 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.
最佳答案
这样解决了。
覆盖v-toolbar__content css类无法正常工作,因为我在样式标签中使用了“ scoped”关键字。一旦我删除了它,它就会起作用并删除了填充。
<style>
.v-toolbar__content {
padding-left: 0px;
}
</style>