Как центрировать v-app-bar и v-system-bar в сети, созданной с помощью vuetify
Среда: Nuxt + Vue 3.x + Vuetify 3.x.
Ниже моя веб-страница и pages/index.vue
<script setup lang = "ts">
</script>
<template>
<v-app style = "width: 800px;margin: auto;" class = "border-red " >
<v-system-bar style = "width: 800px;margin: auto;">System bar</v-system-bar>
<v-app-bar class = "border-blue " style = "width: 800px;margin: auto;">
App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
</v-app-bar>
<v-main>
<v-container >
<h1>HELLO MAIN</h1>
</v-container>
</v-main>
<v-footer>
FOOTER
</v-footer>
</v-app>
</template>
<style scoped>
.border-red {
border: 5px solid red;
}
.border-blue {
border: 5px solid blue;
}
</style>
Я хочу знать, как центрировать системную панель и панель приложений, как v-main и v-footer.
@fOURP Спасибо, я поместил <v-layout style = "width: 800px;margin: auto;"> снаружи <v-app>. И это работает.
@fOURP, почему ты удалил свой ответ?
@kissu Честно говоря, я не был уверен в своем ответе. Потому что при v-макете v-футер отображался вертикально, а затем вам приходилось перемещать v-футер за пределы макета или менять что-то еще. Не знаю..
@fOURP оставь это, если это решило проблему ОП. Вы всегда можете усовершенствовать его или предложить решение CSS, но это решение должен принять ОП. :)
Ответы 1
Я думаю, вы ищете v-макет. Просто оберните им свой контент.
<v-layout>
<v-system-bar>System bar</v-system-bar>
<v-app-bar
class = "border-blue"
style = "width: 800px; margin: auto"
>
App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
</v-app-bar>
<v-main>
<v-container>
<h1>HELLO MAIN</h1>
</v-container>
</v-main>
<v-footer app style = "border: 5px solid green"> FOOTER </v-footer>
</v-layout>
Несмотря на то, что с вашим кодом ширина системной панели и панели приложений теперь может быть отрегулирована до 800 пикселей и расположена в красном поле, <v-footer> теперь перемещается справа от <v-main>, а не ниже <v-main. >.
Ты прав. Я отредактировал свой ответ и добавил опору «приложение» в нижний колонтитул, которая придает нижнему колонтитулу фиксированное положение в нижней части области просмотра.
Попробуйте обернуть контент с помощью v-layout и посмотрите, поможет ли это.