Vuetify 내에서 여백 및 패딩 제거

Vuetify 내에서 여백 및 패딩 제거

그래서 나는 Vuetify와 Front End 개발은 처음이라 내 질문이 단순하거나 어쩌면 너무 막연하다면 미안해.

넛츠와 뷔에티파이(Vuetify)로 웹사이트를 만들려고 하는데, 페이지 가장자리 둘레에 있는 패딩을 제거하는 데 문제가 있다.나는 Vuetify 내에서 유체와 같은 다른 요소들을 사용하려고 시도했고, 컨테이너 css 코드를 찾고 변경하려고 시도했다(실제로 내가 발견했다는 확신이 들지 않는다), Stack Overflow나 Vuetify Github에서 발견한 것에 대해 거의 모든 것을 시도했지만, 나에게는 아무 것도 효과가 없다.

여백과 패딩을 측면에 남기지 말고 컨테이너가 페이지 전체를 차지하도록 하는 방법에 대해 조언해 줄 사람 있어?지난 이틀 동안 적어도 5시간은 이걸 알아내려고 애썼어.이것이 내가 현재 가지고 있는 것이다.

간격 도움말 사용:

class="ma-0"여백 제거
class="pa-0"패딩을 제거하다
class="ma-0 pa-0"둘 다 제거하다

이러한 구성 요소는 소품이기도 하지만 다음과 같은 일부(그리드) 구성 요소에만 해당된다는 점에 유의하십시오.
<v-text-field class="pa-0"></v-text-field>잘 될거야,
그리고<v-text-field pa-0></v-text-field>효과가 없을 것이다.

일부 구성 요소에서 이러한 클래스의 간격을 제거할 수 없는 경우 CSS를 사용하여 관련 요소를 대상으로 지정하십시오.

그래, 그래서 내가 뭘 잘못하고 있는지 알아낼 수 있었어.

여기

<template>
<v-app light>

    <v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
        <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>

        <v-toolbar-title v-text="title"></v-toolbar-title>
        <v-spacer></v-spacer>
    </v-toolbar>


    <v-content>
        <v-container >
            <nuxt/>
        </v-container>
    </v-content>


    <v-footer :fixed="fixed" app>

    </v-footer>
</v-app>

그래서, 제 출처에서는, 모든 것이 "default.vue" 페이지에 정리되어 있는데, 여기 입니다.나는 실제 페이지의 스타일링을 인덱스.vue처럼 바꾸려고 했다.디폴트.vue를 자세히 살펴보니 전에는 눈치채지 못했던 v-container가 보였다(말한 것처럼 완전한 초보자라, 그래서 이 모든 것이 내게는 꽤 새롭다.덧붙일 수 있었다.

<style>
.container{
     max-width: 100vw;
     padding:0px;
  }
</style>

디폴트.vue로, 내가 다루고 있던 이슈를 수정했다.내가 작업하고 있는 템플릿을 이해하고 CSS를 무시할 수 있는 정확한 장소를 찾는 데까지 이르렀다.

또한 사전 정의된 간격 도우미(pa-0)도 있다.https://vuetifyjs.com/en/layout/spacing

참조URL: https://stackoverflow.com/questions/50417431/removing-margins-and-padding-within-vuetify