Bootstrap 在小屏幕上仅显示徽章

【问题标题】：Bootstrap show only badge on small screenBootstrap 在小屏幕上仅显示徽章
【发布时间】：2020-05-07 19:20:07
【问题描述】：

我有一个带有这些标签和徽章的仪表板（MVC Razor + Bootstrap）导航栏

    <span class="btn btn-danger" style="pointer-events: none;">Alert<span class="badge badge-pill badge-default">@alerts</span></span>
    <span class="btn btn-warning" style="pointer-events: none;">Waring<span class="badge badge-pill badge-default">@warning</span></span>
    <span class="btn btn-success" style="pointer-events: none;">Normal<span class="badge badge-pill badge-default">@normal</span></span>

我希望在小屏幕上只显示徽章。我能怎么做？谢谢

【问题讨论】：

标签： asp.net-mvc razor bootstrap-4

【解决方案1】：

使用d-none d-md-inline d-lg-inline-bootstrap 类名在小屏幕上隐藏特定元素。

我希望这是你所期待的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<span class="btn btn-danger"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Alert</span><span class="badge badge-pill badge-default">@alerts</span></span>


<span class="btn btn-warning"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Waring</span><span class="badge badge-pill badge-default">@warning</span></span>

<span class="btn btn-success"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Normal</span><span class="badge badge-pill badge-default">@normal</span></span>

【讨论】：