css - 推特 Bootstrap 4 : two toggler/displaying only one menu in lg screens

Question

我正在使用 Twitter Boostrap 4 并且有一个带有 2 个菜单的导航栏:

• 通用导航的一个菜单

• 帐户的一个菜单

在小型设备上，没问题:两个切换器显示正确

在大型设备上，我只想显示一般导航而不是帐户导航。我的问题:帐户导航正在显示，我不知道如何在大型设备上隐藏它？

<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top"> 
    <img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Calendrier</strong> collaboratif des <strong>stages d'Aïkido</strong> en <strong>France</strong></span>

<!-- global menu toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- account toggle -->
<button class="navbar-toggler" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fa fa-user"></i>
</button>


<!-- account -->
<div class="collapse navbar-collapse justify-content-end"  id="navbarMonCompte">
    <ul class="navbar-nav float-right text-right">
        <li class="nav-item ">
            <a class="nav-link" href="#">Change email</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Change password</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" href="#">Disconnect</a>
        </li>
    </ul>
</div>


<!-- gloab menu  -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item ">
            <a class="nav-link <?php echo ($this->menuSelected == 'accueil') ? 'active' : '';?>" href="/index2/index/">Accueil <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php echo ($this->menuSelected == 'calendrier') ? 'active' : '';?>" href="/calendrier2/calendrier/">Calendrier</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Enseignants</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Vidéos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Comptes-rendus</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                A propos
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Change email</a>
                <a class="dropdown-item" href="#">Change password</a>
                <a class="dropdown-item" href="#">Disconnect</a>
            </div>
        </li>            
    </ul>

    <div class="form-inline my-2 my-lg-0">
        <button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-connexion">
            Connexion
        </button>
    </div>

</div>

你有想法吗？谢谢。埃里克

Answer 1

通过其 id 定位您想要隐藏的导航栏，并为其指定 display:none 样式以在更大的设备上隐藏它，即 min-width: 992px。

例如:如果你想隐藏navbarMonCompte。 CSS 将如下所示。

@media only screen and (min-width: 992px) {
    #navbarMonCompte {
       display: none !important;
    }
}

编辑 - 在评论中回答 OP 的新问题

在小型设备上，如果我单击“帐户切换器”，然后单击“全局菜单切换器”，则会显示 2 个下拉菜单。是否可以在显示下拉菜单时隐藏另一个下拉菜单？

$('button[data-target=my-modal-connexion]').click(function() {
    if($('#navbarSupportedContent').hasClass('show'))
        $('#navbarSupportedContent').removeClass('show');
});

上面给出的 jQuery 将在单击帐户切换器时检查导航栏是否打开。如果打开，它将关闭。