Vuetify 底部导航在较小的屏幕上不起作用答案

【问题标题】：Veutify bottom navigation not working on smaller screenVuetify 底部导航在较小的屏幕上不起作用
【发布时间】：2020-03-20 19:37:07
【问题描述】：

我在我的网络应用程序中使用 Veutify 的 bottom navigation 组件。我有多个部分，我需要底部导航栏上的导航项。我正在使用以下组件，

<template>
    <v-bottom-navigation
            :value="activeBtn"
            color="primary"
            horizontal
    >
        <v-btn>
            <span>Home</span>
            <v-icon class="material-icons">home</v-icon>
        </v-btn>

        <v-btn>
            <span>About</span>
            <v-icon class="material-icons">person_pin</v-icon>
        </v-btn>

        <v-btn>
            <span>Learn</span>
            <v-icon class="material-icons">school</v-icon>
        </v-btn>

        <v-btn>
            <span>Device</span>
            <v-icon class="material-icons">computer</v-icon>
        </v-btn>

        <v-btn>
            <span>Ideas</span>
            <v-icon class="material-icons">emoji_objects</v-icon>
        </v-btn>

        <v-btn>
            <span>Settings</span>
            <v-icon class="material-icons">settings</v-icon>
        </v-btn>


    </v-bottom-navigation>
</template>

<script>
    export default {
        name: "BottomNav",
        data() {
            return {
                activeBtn: 0,
            }
        },
    }
</script>

<style scoped>

</style>

这个组件用在我下面的app.vue中

<template>
    <v-app id="app">
        <Header/>
        <v-content>
            <router-view/>
        </v-content>
        <BottomNav/>
    </v-app>
</template>

这会导致笔记本电脑/台式机上的正确底部菜单如下

但是，当我减小屏幕尺寸或在手机上查看时，它会像下面这样搞砸布局

有人知道如何处理这个问题吗？我期待像 Android 底部导航这样的行为，即隐藏标签和水平滚动。但是当前的 Veutify 文档没有提到这样的功能。

【问题讨论】：

标签： vue.js vuejs2 vuetify.js bottomnavigationview

【解决方案1】：

尝试手动将overflow-x: scroll;css属性添加到底部导航组件。

【讨论】：

【解决方案2】：

在带有底部导航的组件<style>标签内添加这个：

.v-bottom-navigation {
  justify-content: start;
  overflow-x: scroll;
}

v-bottom-navigation 组件已经使用了这个类，所以不需要手动添加。

【讨论】：