Estoy construyendo una aplicación web con Vue.js y Vuetify (https://vuetifyjs.com/en/).
Tengo un diseño sencillo, con 3 columnas. Sin embargo, me gustaría que el 3 columnas para llenar todo el ancho de la página, pero existe una forma automática de la pieza de CSS que se aplica max ancho de 960px. ¿Por qué es eso? ¿Cómo puedo usar toda la pantalla? También puede consultar aquí: 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>

Automático CSS:

@media only screen and (min-width: 960px)
.container {
  max-width: 960px;
}

2 Comentarios

  1. 14

    El concepto de los contenedores es muy común entre los diseños de la página web. De forma predeterminada, Vuetify utiliza un ‘fijo’ contenedor. Un «fluido» contenedor se llene la ventanilla.

    Puede establecer el fluid la proposición a true en su Vuetify contenedor <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>

    Aquí hay alguna información útil acerca de la fija vs depósitos de fluidos: https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

    Adicionales Vuetify red de información se puede encontrar aquí:
    https://vuetifyjs.com/en/layout/grid

  2. 0

    Super Simple Respuesta: Es similar a la respuesta anterior, pero incluye width:100%; como el mío no funciona sin él. Usted podría tener el mismo problema. Podría ser debido a que utiliza el estilo de la etiqueta en lugar de sus atributos de la clase. Algo a tener en cuenta.

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

    Básicamente, te doy toda la v-contenedor de un ancho de 100% para permitir que cualquier elemento que se extienden por todo el ancho de la página.

    Y los elementos que usted desea contenidos, se incluyen en un div con la clase de contenedor.

Dejar respuesta

Please enter your comment!
Please enter your name here