Question

我是在navbar引导程序组件内部动态填充nav-tems，有时没有nav-items，在这种情况下，我想在设备视口中隐藏汉堡包图标。我认为navbar-toggler-icon是负责此工作的班级。在没有nav-items的情况下删除此类会导致出现带边框的框。

当没有导航项时，隐藏汉堡包元素的方法是什么？

Codeply of navbar's with nav-items and no nav-items。

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <a class="navbar-brand" href="#">Navbar Without Nav Items</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav2">
        <ul class="navbar-nav"></ul>
    </div>

</nav>

Answer 1

我看到两种方法来完成您想要的。 1.完全卸下按钮。 2.在跨度类中添加“ d-none”。

<a class="navbar-brand" href="#">Navbar Without Nav Items</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon d-none"></span>
  </button>

Answer 2

假设您只有一个<template> <div> <q-toggle v-model="FormState.email" /> </div> </template> <script> export default { computed: { FormState: { get () { return this.$store.state.form }, set (val) { this.$store.commit('auth/setSeller', val) } } } } </script>，那么如果不存在导航项目，则可以执行类似的操作来隐藏。

nav-bar

如果没有导航项，则隐藏Bootstrap汉堡包图标

2 个答案: