如何创建具有固定宽度内容的 v-toolbar答案

【问题标题】：How to create a v-toolbar with fixed width content如何创建具有固定宽度内容的 v-toolbar
【发布时间】：2019-04-24 20:24:43
【问题描述】：

基本上我接受了这个，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 使工具栏的内容固定宽度和居中。

【问题讨论】：

CodePen?示例代码？有什么事吗？

标签： vue.js frontend vuetify.js

【解决方案1】：

将此样式应用于 v-toolbar：

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

您将不得不对 % 进行一些操作，以使其与 v-container 元素保持一致。您还可以查看计算属性以检查不同的断点。

【讨论】：