gpt4 book ai didi

css - 在 vuetify 中维护跨 `default.vue` 和 `index.vue` 的网格系统

转载 作者:行者123 更新时间:2023-12-05 05:46:25 36 4
gpt4 key购买 nike

我是 vue 的新手,这可能是非常基本的问题。我想要一个 3 列布局的页面,其中两列应位于 default.vue 中并且一列应该在一页中,比如 index.vue .我在 default.vue 中创建了所有内容它工作正常,但当我将内容移动到 index.vue 时我无法维护它文件。这是我所拥有的概述:

<html>
<body>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col">
Navigation
</div>
</div>
</div>
<div class="col-8"> <!-- I need this div in index.vue -->
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</body>
</html>

在这里,如果我移动整个 div,包括 col-8index.vue然后 CompanyCardNavigation 附近向左移动并且主要的 div 低于它。另一方面,如果我只保留这条线 <div class="col-8">default.vue并将内容(其中 2 行)移动到 index.vue . CompanyCard它应该保持在右边,但中间的一栏是空白的,内容在它下面。如何在 default.vue 中维护该 3 列格式和 index.vue

我正在使用 NuxtVuetify .

谢谢!

最佳答案

如果您使用 Nuxt那么你应该使用 <Nuxt />内部组件 defualt.vue .这将包括页面组件你可以查看nuxt layout docs

default.vue 的示例:

<template>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col"> Navigation </div>
</div>
</div>
<div class="col-8">
<!-- I need this div in index.vue -->
<Nuxt />
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</template>

现在在您的 index.vue 中添加:

<template>
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
</template>

关于css - 在 vuetify 中维护跨 `default.vue` 和 `index.vue` 的网格系统,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71195369/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com