Twitter Bootstrap 4：两个切换器/在 lg 屏幕中仅显示一个菜单

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 在 cmets 中的新问题

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

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

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

Answer 2

尝试将hide-account 类添加到帐户按钮并将其放入您的css。

@media only screen and (min-width: 992px) {
.hide-account {
    display: none;
}}

jsfiddle：https://jsfiddle.net/sfto2qhw/1/

Answer 3

您需要将d-block d-md-none 添加到您的account Toggler 按钮，您可以根据您的断点使用d-sm-none 或d-lg-none 而不是d-md-none

<!-- 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 d-block d-md-none" 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>