我有喜欢小屏幕上观看时,预计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>
任何帮助表示赞赏!
尝试在你app.vue删除<div id="app">
。因为你已经把它在
public/index.html