1

我正在使用 vuetify 并有这个：

<v-container
      class="d-flex justify-center mb-6"
      :color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'"
      flat
      tile
  >
    <v-row justify="center">
      <v-col>
        <h1>This is an about page</h1>
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col>
        <p>
          The logo is licensed with the
          <a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
            Creative Commons License</a
          >
          and is provided by
          <a href="https://www.iconfinder.com/laurareen/" target="_blank">
            iconfinder</a
          >
        </p>
      </v-col>
    </v-row>
  </v-container>

它呈现如下：

呈现 2 列而不是 2 行

我怎样才能让这个渲染2行呢？？？

我尝试添加sm="12"到每一列，但同样的事情。

4

1 回答 1

1

要更好地了解 vuetify 的网格系统，您可以在此处阅读文档。

但简而言之，根据文档：

v-container提供居中和水平填充站点内容的能力。

你不需要class="d-flex justify-center"在这个元素上设置。

同样根据v-container API page，该组件不接受flat和tile作为道具。

删除这些道具和课程，您应该会很好。

检查下面的演示：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row justify="center">
          <v-col>
            <h1>This is an about page</h1>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col>
            <p>
              The logo is licensed with the
              <a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
              Creative Commons License</a>
              and is provided by
              <a href="https://www.iconfinder.com/laurareen/" target="_blank">
              iconfinder</a>
            </p>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

于 2021-08-05T06:40:26.147 回答