bootstrap-4 - 隐藏下拉样式按钮 Bootstrap 或使其禁用

这是一个在导航栏上有三个下拉按钮的示例。

第一个按钮（左起）被禁用，它有一个特殊的类dropdown-no-carrot——如果没有通知，你可以显示它。
第二个按钮就像您的活动下拉按钮。
第三个按钮使用相同的dropdown-no-carrot类，而是显示一个计数，这是许多网站让用户知道有消息的方式。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
    .dropdown-no-carrot::after {
        border-color: transparent !important;
        content: none;
    }

    .dropdown-no-carrot .badge {
        vertical-align: top;
    }

    .rounded-button {
        border-radius: 5rem;
    }
</style>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" 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>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>

    <div class="dropdown">
        <button class="btn btn-light rounded-button dropdown-toggle dropdown-no-carrot mr-3" type="button" id="dropdownNotification1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled title="No notifications">
            <i class="far fa-bell fa-lg"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotification1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="btn btn-light rounded-button dropdown-toggle mr-3" type="button" id="dropdownNotification2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Click to see notifications">
            <i class="far fa-bell fa-lg"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotification2">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="btn btn-light rounded-button dropdown-toggle mr-3 dropdown-no-carrot" type="button" id="dropdownNotification3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Click to see notifications">
            <i class="far fa-bell fa-lg"></i><span class="badge badge-danger">3</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotification3">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</nav>

bootstrap-4 - 隐藏下拉样式按钮 Bootstrap 或使其禁用

问题描述

解决方案

推荐阅读