web-dev-qa-db-fra.com

Suppression des marges et du rembourrage dans Vuetify

Donc, je suis à peu près novice en développement Vuetify et Front End, donc désolé si ma question est simple ou peut-être même trop vague. 

J'essaie de créer un site Web avec Nuxt et Vuetify, mais je ne parviens pas à supprimer le remplissage des bords des pages. J'ai essayé d'utiliser différents composants dans Vuetify tels que fluid, j'ai essayé de trouver et de modifier le code css du conteneur (que je ne suis même pas convaincu de l'avoir trouvée), j'ai essayé à peu près tout ce que j'ai trouvé sur Stack Overflow ou sur le github Vuetify, mais rien ne fonctionne pour moi. 

Quelqu'un a-t-il des conseils pour que le conteneur occupe toute la page au lieu de laisser des marges et du rembourrage sur le côté? J'ai passé au moins 5 heures au cours des 2 derniers jours à essayer de comprendre cela. C'est ce que j'ai actuellement.

vuetify.js
3
Phil Robinson

utiliser aides d'espacement : 

class="ma-0" supprime les marges
class="pa-0" supprime le remplissage
class="ma-0 pa-0" supprime les deux 

Notez que ce sont aussi des accessoires, mais seulement pour certains composants (de la grille), par exemple:
<v-text-field class="pa-0"></v-text-field> fonctionnera,
et <v-text-field pa-0></v-text-field> ne fonctionneront pas. 

Si, dans certains composants, vous ne pouvez pas supprimer l'espacement avec ces classes, vous devez cibler des éléments pertinents avec CSS.

7
Traxo

Ok, j'ai donc pu comprendre ce que je faisais mal. 

Ici 

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

Donc, dans mes sources, tout est présenté dans la page "default.vue", qui est ici. J'essayais de modifier le style de la page, comme dans index.vue. Lorsque j'ai jeté un œil à default.vue, j'ai vu le v-container, que je n'avais pas remarqué auparavant (comme je le disais, complet débutant, donc tout cela est assez nouveau pour moi). J'ai pu ajouter 

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

default.vue, qui a corrigé le problème que je traitais. Il s’agissait vraiment de comprendre le modèle dans lequel je travaille et de trouver le bon endroit pour remplacer le CSS.

3
Phil Robinson

Ils ont également des assistants d'espacement prédéfinis, à savoir pa-0 . https://vuetifyjs.com/fr/layout/spacing

1
echo