web-dev-qa-db-ja.com

Vuetifyコンテナの最大幅が修正されました

Vue.jsとVuetifyでWebアプリケーションを構築しています（ https://vuetifyjs.com/en/ ）。 3列のシンプルなレイアウトがあります。ただし、3列でページの幅全体を埋めたいのですが、最大幅を960pxに強制するCSSの自動部分があります。何故ですか？画面全体を使用するにはどうすればよいですか？こちらでも確認できます： 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>

自動CSS：

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

コンテナの概念は、Webサイトのレイアウトでは非常に一般的です。デフォルトでは、Vuetifyは「固定」コンテナを使用します。 「流体」コンテナがビューポートを埋めます。

Vuetifyコンテナでfluid propをtrueに設定できます<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>

固定コンテナと流体コンテナに関する役立つ情報を次に示します。 https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for -you /

追加のVuetifyグリッド情報は、ここにあります： https://vuetifyjs.com/en/layout/grid

14
joknawe

Super Simple Answer：上記の回答に似ていますが、width：100％を含みます。私がそれなしでは機能しなかったので。同じ問題があるかもしれません。クラス属性の代わりにスタイルタグを使用したことが原因の可能性があります。知っておくべきこと。

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

基本的に、すべての要素がページの幅全体に拡張できるように、vコンテナ全体の幅を100％にします。

含まれたい要素は、コンテナクラスでdivに含めます。

2
Jason