web-dev-qa-db-fra.com

Vuetify Container max-width fixe

Je construis une application Web avec Vue.js et Vuetify ( https://vuetifyjs.com/en/ ). J'ai une mise en page simple, avec 3 colonnes. Cependant, je voudrais que les 3 colonnes remplissent toute la largeur de la page, mais il existe un CSS automatique qui applique max-width à 960px. Pourquoi donc? Comment puis-je utiliser tout l'écran? Vous pouvez également le vérifier ici: https://codepen.io/mlikoga/pen/KeLNvy

<div id="app">
  <v-app>
    <v-content>
      <v-container ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

Le CSS automatique:

@media only screen and (min-width: 960px)
.container {
  max-width: 960px;
}
cssvue.jsvuetify.js
9
Marcelo Li Koga

Le concept de conteneur est très répandu parmi les mises en page de sites Web. Vuetify utilise par défaut un conteneur 'fixe'. Un conteneur 'fluide' remplira la fenêtre.

Vous pouvez définir le fluid prop sur true sur votre conteneur Vuetify <v-container>:

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

Voici quelques informations utiles sur les réservoirs de fluide fixes/liquides: https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for -vous /

Des informations supplémentaires sur la grille Vuetify sont disponibles ici: https://vuetifyjs.com/en/layout/grid

14
joknawe

Super Simple Answer: C'est similaire à la réponse ci-dessus mais inclut width: 100%; comme le mien ne fonctionnait pas sans elle. Vous pourriez avoir le même problème. C'est peut-être parce que j'ai utilisé la balise style au lieu de leurs attributs de classe. Quelque chose à être au courant.

<template>
     <v-container fluid style="margin: 0px; padding: 0px; width: 100%">
          <v-layout wrap>
               <div class="container">
                    Content you want in a container as this takes on the container class.
               </div>
               <div>
                    Content you don't want contained as it takes on the fluid 100% width. 
               </div>
          </v-layout>
     </v-container>
</template>

En gros, vous attribuez une largeur de 100% à l'ensemble du conteneur virtuel pour permettre à tout élément de s'étendre sur toute la largeur de la page.

Et les éléments que vous voulez contenir, vous les incluez dans une div avec une classe de conteneur.

2
Jason