web-dev-qa-db-fra.com

Comment remplir la largeur du contenu dans vuetify

  1. Ce que je veux, c’est que pour remplir toute la largeur de l’écran mobile avec vuetify

avec ce code: 

 <v-content>
    <router-view>
      <v-container fluid></v-container>
    </router-view>
  </v-content>

la vue du routeur a une marge à gauche et à droite

  1. et ce bas-nav est déjà monté sur l'écran et je ne ferai pas glisser l'écran pour montrer le bas-nav
vue.jsvuetify.js
3
TheBAST

Je devais supprimer dynamiquement le rembourrage sur mobile uniquement, cela fonctionne pour moi: 

<v-container :class="{'px-0': $vuetify.breakpoint.xsOnly }">
   <router-view> </router-view>
</v-container>

Il n’ya pas beaucoup de documentation que je pourrais trouver à partir de maintenant, mais en regardant le code j’ai trouvé ceci: 

// Breakpoint ranges. 
xsOnly,
smOnly, 
smAndDown,
smAndUp,
mdOnly,
mdAndDown,
mdAndUp,
lgOnly,
lgAndDown,
lgAndUp,
xlOnly,
6
Tim Scholten

v-container crée un div avec le conteneur de classe. Cette classe donne à votre div padding de tous les côtés. (La quantité change en fonction du point d'arrêt viewport ; il s'agit de 2 pixels pour xs, 24 pixels pour xl). Si vous incluez ce qui suit dans votre css, votre rembourrage latéral devrait disparaître. 

.container {
   padding: 0!important
}
1
LShapz

vous pouvez également essayer ceci, vuetify a helper classes pour définir le remplissage et la marge

<v-container fluid  class="pa-0 ma-0">
</v-container>
1
i5dr0id