Как создать v-панель инструментов с фиксированной шириной содержимого

Question

В основном я взял это, https://vuetifyjs.com/en/examples/layouts/googleContacts.

Мне не нравятся плавающие контейнеры, я хочу, чтобы все помещалось в обычный v-контейнер с фиксированной шириной на большом экране.Вот чего я пытаюсь достичь:

Но я столкнулся с рядом препятствий с помощью панели инструментов: она плавает, но ее содержимое центрировано и имеет фиксированную ширину.Я вставил v-контейнер в v-toolbar, но он не был отцентрирован, так как v-toolbar__content> *: first-child и last-child имеют поле: 0.Затем добавили v-flex перед v-container, что вызвало падение высоты, чтобы кнопки v-toolbar больше не занимали всю высоту панели инструментов.Затем добавили v-layout, чтобы увеличить высоту, и немного v-flex внутри, но до сих пор не добились успеха.Вопрос в том, как правильно работать с v-toolbar и v-container, чтобы содержимое панели инструментов было фиксированной ширины и центрировано.

Answer 1

Применить к v-панели инструментов этот стиль:

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

Вам придется немного поиграть с%, чтобы он был встроен в элементы v-контейнера. Вы также можете просмотреть вычисляемое свойство, чтобы проверить различные точки останова.