Vue.js 如何创建具有固定宽度内容的v形工具栏

基本上我拿了这个

我不喜欢浮动容器，我希望所有东西都能放进大屏幕上通常固定宽度的中心v形容器中。这就是我想要实现的目标：

---

但我在使用工具栏时遇到了一些障碍：它是浮动的，但它的内容居中，并且具有固定的宽度。我在v-toolbar内粘贴了v-container，但它没有居中，因为v-toolbar__content>*：第一个子项和最后一个子项的边距为：0。然后在v-container之前添加了v-flex，这导致高度崩溃，因此v-toolbar按钮不再占据整个工具栏高度。然后添加了v-layout以扩展高度，并在内部添加了一些v-flex，但仍然没有取得任何成功。问题是如何正确使用v-toolbar和v-container，使工具栏的内容固定宽度并居中。

应用于v-toolbar此样式：

<v-toolbar :class="{ 'my-toolbar': $vuetify.breakpoint.smAndDown }"> </v-toolbar>
<style>
 .my-toolbar { width: 80%; left:  10%; } 
</style>

.my工具栏{宽度：80%；左侧：10%；}

---

您必须使用%来保持它与v-container元素的内联。您还可以查看计算属性以检查不同的断点。

CodePen？示例代码？任何东西