Vuetify輪播不占用整個寬度高度-有解無憂

我想制作一個占據視口全寬和全高的旋轉木馬。我在 vue.js 2 專案中使用 Vuetify。這是我的代碼：

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
      <v-container fill-height>
        <v-carousel
  cycle
  hide-delimiters
  style="height: 100%;">
  <v-carousel-item>
    <v-sheet
    color="red lighten-1"
    fill-height
    style="height: 100%">
      <v-row
          class="fill-height"
          align="center"
          justify="center"
      >
        <div class="text-h2">
          Slide One
        </div>
      </v-row>
    </v-sheet>
  </v-carousel-item>
    <v-carousel-item>
      <v-sheet
          color="warning"
          style="height: 100%">
        <v-row
            class="fill-height"
            align="center"
            justify="center"
        >
          <div class="text-h2">
            Slide Two
          </div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
  </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

（這是一個將在堆疊溢位中呈現的版本）我的結果如下所示： Vuetify 輪播不占用整個寬度高度

我正在使用最新版本的 Opera GX 來渲染它，我正在使用vue serve它來服務它。

uj5u.com熱心網友回復：

v-container通過應用 a classof pa-0（p在all 邊上添加到）來洗掉填充0。
v-container通過將其屬性設定fluid為true（添加屬性足以將其設定為）來洗掉邊距和最大寬度true。
On v-carousel，移除style系結，因為它被它的heightprop 覆寫。相反，將v-carousel'設定height為100%。

<v-container class="pa-0" 1??
             fluid        2??
             fill-height>

  <v-carousel height="100%" 3?? ?>

顯示代碼片段

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container class="pa-0" fluid fill-height>
          <v-carousel height="100%" cycle hide-delimiters>
            <v-carousel-item>
              <v-sheet color="red lighten-1" fill-height style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide One
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
            <v-carousel-item>
              <v-sheet color="warning" style="height: 100%">
                <v-row class="fill-height" align="center" justify="center">
                  <div class="text-h2">
                    Slide Two
                  </div>
                </v-row>
              </v-sheet>
            </v-carousel-item>
          </v-carousel>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476124.html

標籤：javascript html css Vue.js Vuetify.js

上一篇：如何更改復選框值的顏色

下一篇：CSS影片在運行時出現在頂部