vuetify.js v-property의 전체 너비를 얻는 방법

vuetify.js v-property의 전체 너비를 얻는 방법

처음 해 본다vuetify.js그리고 그것을 가지고 놀기 시작했다.

이건 내 암호야

관리자 패널.부에를 하다

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

사용자 생성부에를 하다

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

여기서 나는 볼 수 있다.v-container요소는 전체 너비를 사용할 수 있게 한다.내가 원하는 것은 나의 것이다.v-container동일한 너비를 얻기 위해 작성 사용자 구성요소 내부. (노란색은 사라지고 빨간색은 화면을 채운다)

이걸 어떻게 해?

사용fluid받침대:

<v-container 
  fluid
/>

코디펜.

마진 및 패딩 클래스/프로포즈를 사용해 보셨습니까?

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

또는

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

전체 화면이 모바일 기기 전용인 경우

나도 같은 문제를 겪고 있었어.

나는 내 예에서 내가 어떤 것을 가지고 있다는 것을 깨달았다.<v-content>상위 및 하위 페이지에 모두 표시됨.그<v-content>앱이 예쁘게 보이도록 하고 네비바와 타이틀바의 간격을 관리하는 데 사용된다.

앱에 선언된 항목만 있는지 확인하십시오.

@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-컨테이너 태그를 모두 전체 너비를 차지하도록 설정하면 해결된다.

이렇게 해도 좋다.

마스터뷰

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

범주의부에를 하다

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

그래서 오른쪽에는 충분한 공간이 필요할 것이다.

액체를 사용하고 패딩이 있으면 제거하십시오.

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

참조URL: https://stackoverflow.com/questions/51038082/vuetify-js-how-to-get-full-width-of-v-container