vuetify.js如何获取v-container的全宽

j13ufse2  于 2023-03-31  发布在  Vue.js
关注(0)|答案(8)|浏览(222)

我是vuetify.js的新手,开始玩它。

这是我的准则。

管理面板值

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

在这里,我可以看到v-container元素获得了可用的全部宽度。我想要的是我在create-user组件中的v-container获得相同的宽度。(黄色将消失,红色将填满屏幕)
我如何实现这一目标?

lstz6jyr

lstz6jyr1#

使用fluid属性:

<v-container 
  fluid
/>

Codepen .

xkrw2x1b

xkrw2x1b2#

我也有同样的问题。
我意识到在我的例子中,我在父页面和子页面上都有一个<v-content><v-content>用于使应用程序看起来更漂亮,并管理导航栏和标题栏上的间距。
请确保您在应用中只声明了一个。

yqhsw0fo

yqhsw0fo3#

你试过使用margin和padding类/props吗?

<v-container class="red ma-0">

<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">

只在移动的设备上使用全屏显示?

wh6knrhe

wh6knrhe4#

@Billial Begueradj发布的答案是完美的。然而,问题可能仍然存在 * 如果有一个未检查的v-container标记在层次结构 * 上。

This will NOT work

<v-container>
  <v-container fluid>This will not work</v-container>
<v-container>

在上面的代码中,内部的v-container标记将不会实现全宽,因为在层次结构中还有另一个v-container标记没有设置为全宽布局,它将有效地限制内部标记

这会成功

<v-container fluid>
  <v-container fluid> This will work </v-container>
</v-container>

将内部和外部v-container标记都设置为占据全角即可解决此问题。

jljoyd4f

jljoyd4f5#

使用液体并移除填充物(如有)

<v-container fluid class="py-0 px-0"></v-container>
8wigbo56

8wigbo566#

你可以这样试试

主视图

<v-app id="app">
<v-navigation-drawer
        v-model="drawer"
        temporary
        absolute
>
    <sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
        <v-text-field
                color="purple"
                id="globalSearch"
                name="globalSearch"
                label="Search"
                v-model="globalSearch"
                v-validate="'required'"
        ></v-text-field>
        <v-btn to="dashboard" flat>Dashboard</v-btn>
        <v-btn to="login" flat>Login</v-btn>
        <v-btn flat>Register</v-btn>
    </v-toolbar-items>
</v-toolbar>
<v-content>
    <v-container fluid>
        <router-view></router-view>
    </v-container>
</v-content>
<v-footer height="auto">
    <v-card
            flat
            tile
            class="indigo lighten-1 white--text text-xs-center"
    >
        <v-card-text>
            <v-btn
                    v-for="icon in icons"
                    :key="icon"
                    icon
                    class="mx-3 white--text"
            >
                <v-icon size="24px">@{{ icon }}</v-icon>
            </v-btn>
        </v-card-text>
        <v-card-text class="white--text">
            &copy;2018 — <strong>Eliyas Hossain</strong>
        </v-card-text>
    </v-card>
</v-footer>
</v-app>

类别.vue

<template>
<v-card>
        <v-card-title>
            <div>
                <h2 class="pl-2">Categories</h2>
                <v-btn @click="dialog = !dialog" color="primary" dark>New Category</v-btn>
            </div>
            <v-spacer></v-spacer>
            <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
            ></v-text-field>
        </v-card-title>
</v-card>
</template>

所以它将占据右侧的全部空间。

nhhxz33t

nhhxz33t7#

对于任何使用nuxt的人-请确保您将流体 prop 应用于布局中的顶级v容器,而不是页面组件中的容器。

<v-main>
  <v-container fluid>
    <Nuxt />
  </v-container>
</v-main>
jaxagkaj

jaxagkaj8#

我遇到了同样的问题,添加流体是不够的。原来在style.css文件中创建项目后,#app的max-width属性设置为1280 px;.修改为width后:100%和填充:0,它看起来像我想要的方式。
在style.css中

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

致:

#app {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

相关问题