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

Question

我基本上是这样做的，https://vuetifyjs.com/en/examples/layouts/googleContacts。

我不喜欢浮动容器，我希望所有内容都适合大屏幕上通常以固定宽度为中心的v容器。那就是我想要达到的目标：

但是我在工具栏上遇到了很多障碍：它是浮动的，但是内容居中并且宽度固定。我将v-container粘贴在v-toolbar内，但是由于v-toolbar__content> *：first-child和last-child具有margin：0，所以它没有居中。然后在v-container之前添加v-flex，这会导致高度崩溃，因此v-toolbar按钮不再占据整个工具栏高度。然后添加了v-layout来扩展高度和内部一些v-flex，但仍然没有成功。问题是如何正确使用v-toolbar和v-container使工具栏的内容固定宽度并居中。

Answer 1

将以下样式应用于v-toolbar：

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

您将不得不对％稍作调整，以使其与v容器元素保持一致。您还可以查看计算属性，以检查不同的断点。