Bootstrap показать только значок на маленьком экране - PullRequest
Новая
       9

Bootstrap показать только значок на маленьком экране

0 голосов
/ 21 января 2020

У меня есть панель навигации (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>

Мне бы хотелось, чтобы на маленьком экране показывался только значок. Как я могу сделать? Спасибо

1 Ответ

0 голосов
/ 21 января 2020

используйте 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>
...