时间戳

首页 > 解决方案 > Bootstrap 在小屏幕上仅显示徽章

asp.net-mvc - Bootstrap 在小屏幕上仅显示徽章

问题描述

我有一个带有这些标签和徽章的仪表板（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-mvcrazorbootstrap-4

解决方案

使用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>

推荐阅读