Vuetify断点不破?

问题描述 投票:0回答:1

我有喜欢小屏幕上观看时,预计Vuetify没有打破我的柔性盒的问题。我期望形式打入3份每一个小屏幕上观看时,跨越12个COLS。但是发生的事情是,它只是保留了它的大小从原来的。像预期它不verticly叠加。模板代码如下;

编辑:我可以告诉大家,vuetify正在更新的断点,但布局不会改变。如果我设置一个计算的属性这一点。$ vuetify.breakpoint.lgandup我可以看到,改变屏幕尺寸时,布尔变为假时,它应该和回真时,它应该。但布局并没有改变。

编辑:我已经更新了我的问题有一些更多的信息,并试图包括所有相关文件。

编辑:我想补充加入卷收,我周围想出了一个小的工作,.. <v-layout row wrap>但似乎这不能要,因为我已经告诉vuetify打破这一成一个完整的12山坳跨度上小屏幕,所以不应该有什么包。还在寻找更多的了解这里。

main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// Override default theme for Vuetify
Vue.use(Vuetify, {
  iconfont: 'mdi',
  theme: {
    "primary": "#673ab7",
    "secondary": "#757575",
    "accent": "#d500f9",
    "error": "#ff1744",
    "info": "#d500f9",
    "success": "#4caf50",
    "warning": "#ff9100"
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')



app.vue
<template>

  <div id="app">
    <v-app>
      <nav-draw/>
      <nav-bar/>
      <v-content>
        <v-container fluid>
          <v-layout row>
            <v-flex x12 sm12 md12 lg1 xl1>
              Test
            </v-flex>
            <v-flex xs12 sm12 md12 lg9 xl9>
              {{ this.$vuetify.breakpoint.mdAndDown }}
            </v-flex>
            <v-flex xs12 sm12 md12 lg2 xl2>
              {{ this.$vuetify.breakpoint.lgAndUp }}
            </v-flex>
          </v-layout>
        </v-container>

      </v-content>
      <v-footer app>2019 .com</v-footer>
    </v-app>
  </div>

</template>

<script>
import NavDraw from '@/components/NavDraw'
import NavBar from '@/components/NavBar'

export default {
  components: {NavDraw, NavBar }
}
</script>


public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath 

    %>favicon.ico">
    <title>FranchiseFaves</title>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
      <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
</html>

任何帮助表示赞赏!

vuejs2 vuetify.js
1个回答
0
投票

尝试在你app.vue删除<div id="app">。因为你已经把它在 public/index.html

© www.soinside.com 2019 - 2024. All rights reserved.