web-dev-qa-db-ja.com

vuetifyでコンテンツの幅を埋める方法

  1. 私が欲しいのは、モバイル画面全体の幅をvuetifyで埋めることです

このコードで：

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

ルータービューには、左側と右側の両方にマージンがあります

  1. そして、そのbottom-navはすでに画面に取り付けられており、画面をドラッグしてbottom-navを表示することはありません
vue.jsvuetify.js
5
TheBAST

モバイルでのみパディングを動的に削除する必要がありましたが、これは私にとってはうまくいきます：

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

今のところ見つけることができるドキュメントはあまりありませんが、 code を見ると、これらが見つかりました：

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

v-containerは、クラスコンテナーでdivを作成します。このクラスは、すべての側面にdivのパディングを提供します。 （量は ビューポートブレークポイント に応じて変わります。xsの場合は2px、xlの場合は24pxです）。以下をcssに含めると、サイドパディングは消えます。

.container {
   padding: 0!important
}
1
LShapz

また、これを試すことができます、vuetifyには ヘルパークラス があり、パディングとマージンを設定します

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