Как сделать так, чтобы навбар полностью исчез с bootstrap 4

Question

Я использую Vue. js и Bootstrap 4. Я бы хотел, чтобы панель навигации полностью исчезала, когда экран становится маленьким.

Это мой Bootstrap 4 код в . vue file:

<template>
    <div>
        <nav class="navbar navbar-dark bg-dark">
            <p class="pl-5">Hello Guest</p>
            <p class="mr-5">Nice play!</p>
        </nav>
    </div>
</template>

<script>  
    export default {
        data() {
            return {
                title: "Vue ninjas"
            }
        }
    }
</script>

<style scoped>
    p {
        color: lightgreen;
        text-align: center;
    }
    nav {
        height: 11vh;
    }
</style>

Очевидно, я не хочу, чтобы панель навигации становилась выпадающим меню, но мне бы хотелось, чтобы она исчезла со всем содержимым при изменении размера. Я пытался во многих отношениях безуспешно. Есть ли способ сделать это с Bootstrap 4 или Javascript? Может помочь?

Answer 1

Я решил с этим кодом:

@media screen and (max-width:600px) {
        nav { 
            display:none 
        }
    }