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

Posted 2023-02-16

【中文标题】vuetify.js 如何获得 v-container 的全宽

【英文标题】：vuetify.js how to get full width of v-container

【发布时间】：2018-12-04 21:23:46

【问题描述】：

我是 vuetify.js 的新手并开始使用它。

这是我的代码。

Admin-panel.vue

<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 以获得相同的宽度。 （黄色会消失，红色会填满屏幕）

我如何做到这一点？

【问题讨论】：

您是否尝试将fluid 属性添加到<v-container fluid>？

是的，我也累了

你能在codepen上复制吗？ Afaics 它应该是全宽减去边距和/或填充。

<v-flex full-width> under `' 会将其推至全宽，而 v-flex 将在调整您可能不想要全宽的其他东西时提供一些很好的灵活性。

我使用container--fluid

【参考方案1】：

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

这行不通

<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 标签都设置为占据整个宽度可以解决它。

【参考方案2】：

你可以这样试试

ma​​ster.vue

<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 >
    <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>

category.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>

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

【参考方案3】：

我遇到了同样的问题。

我意识到在我的例子中，我在父页面和子页面上都有一个<v-content>。 <v-content> 用于使应用看起来漂亮并管理导航栏和标题栏上的间距。

确保您的应用中只声明了一个。

【参考方案4】：

使用fluid 属性：

<v-container 
  fluid
/>

Codepen.

【讨论】：

我使用与他相同的代码，只是简单地向 v-container 添加流体并不能解决问题。

这意味着您的问题在其他地方，否则我在这里分享的内容在官方文档本身@JeffBluemel 中提到了

我使用container--fluid

【参考方案5】：

您是否尝试过使用边距和填充类/道具？

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

或

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

只为移动设备提供全屏显示？