Показывать только значок на мобильном устройстве и значок и текст на рабочем столе

Я использую Bootstrap 4.1 и хочу отображать значок внутри кнопки. Конечно, это просто:

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong"></i> Facebook
</a>

Но на мобильных устройствах с меньшим объемом памяти я хочу отображать только значок, а не текст. Раньше это было легко с Bootstrap 3, но я не могу найти решение для этого в документации 4.1. Как это можно / нужно делать?

Одно из самых простых решений: сохраните в макете и значок, и текст. Используя медиа-запросы, скройте текст для экранов меньшего размера. Вы можете оставить текст внутри диапазона.

AKNair 10.09.2018 09:27

Попробуйте эту ссылку, вы узнаете jsfiddle.net/UI_Designer/2byptdoL/1

chintuyadavsara 10.09.2018 09:27
1
2
3 494
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Вы можете использовать отображать утилиты, просто отрегулируйте точку останова в соответствии с вашими предпочтениями.

d-none d-md-inline означает, что Facebook скрыт, начиная с наименьшей ширины до точки останова md, затем, начиная с md и выше, элемент будет иметь стиль display:inline.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong">Icon</i> <span class="d-none d-md-inline">Facebook</span>
</a>

Для этого вы можете использовать медиа-запрос

.fab {
  display: inline;
}

@media only screen and (max-width: 600px) {
  .fab {
     display: none;
   }
}

Классы видимости изменились с Bootstrap 3, и вначале меня это тоже сбивало с толку. Основные классы из сайт загрузки:

Класс размера экрана:

  • Скрыт на всех .d-none
  • Скрыт только на xs .d-none .d-sm-блок
  • Скрыт только на см .d-sm-none .d-md-block
  • Скрыт только на мкр .d-md-none .d-lg-block
  • Скрыт только на lg .d-lg-none .d-xl-block
  • Скрыт только на xl .d-xl-none
  • Виден на всех .d-блок
  • Виден только на xs .d-block .d-sm-none
  • Виден только на sm .d-none .d-sm-block .d-md-none
  • Виден только на md .d-none .d-md-block .d-lg-none
  • Виден только на lg .d-none .d-lg-block .d-xl-none
  • Виден только на xl .d-none .d-xl-block

Во-первых, сохраните текст Facebook во встроенном элементе, таком как span, и используйте медиа-запросы, чтобы не отображать содержимое span на маленьких экранах.

@media (min-width: 320 пикселей) {/ * смартфоны, iPhone, телефоны с вертикальной ориентацией 480 x 320 * /}

@media only screen and (min-width: 320px) {

  a>span{
     display: none;
   }
}

Другие вопросы по теме