Bootstrap3.visible- .hidden- display inline

У Bootstrap есть хорошая утилита класса .visible-* (например. .visible-lg) для выбора того, что показывать или скрывать в зависимости от размера экрана.

При использовании этих классов применяется стиль display: block !important; при правильном размере экрана.

Но иногда я хотел бы использовать его для некоторых элементов, которые отображаются inline или inline-block.

Как я могу чисто переопределить некоторые правила загрузки, чтобы иметь выбор? Или это должен быть запрос функции в бутстрапе?

ИЗМЕНИТЬ

Похоже, я не единственный, кто интересуется этой проблемой. Здесь проблема github.

Спасибо за последний ответ!

Ответы

Ответ 1

Обновление для Bootstrap v3.2.0

Теперь это исправлено в Bootstrap v3.2.0 с this commit

В соответствии с новой версией адаптивных классов:

Начиная с v3.2.0, классы .visible-- для каждой точки останова представлены в трех вариантах: по одному для каждого значения свойства отображения CSS, перечисленного ниже:

Group of classes          | CSS display
 .visible-*-block         |  display: block;
 .visible-*-inline        |  display: inline;
 .visible-*-inline-block  |  display: inline-block;

Например, вы можете использовать:

<p>Device is: <span class="visible-lg-inline">Large</span></p>

Другие экземпляры

Отвечено на вопрос о Stackoverflow:

Bootstrap 3 класса visible-lg перемещает пробел в новую строку

Сообщено в вопросах Bootstrap:

Ответ 2

Это было исправлено в v3.1.

.visible-lg или .visible-md заставит display: block !important;, но с помощью .hidden-xs или .hidden-sm отобразится встроенный.

Ответ 3

Следующая библиотека расширяет видимые вспомогательные классы с помощью встроенных и встроенных блоков:

https://github.com/moappi/bootstrap.inline-responsive

Реализует следующее:

visible-inline-*
hidden-inline-*

visible-inline-block-*
hidden-inline-block-*

Ответ 4

Обновление bootstrap 3.1 или выше действительно решает проблему, так как с этой точки в классах hidden- только скрыть тег и больше не устанавливать display: block. Таким образом, вы можете использовать <div> для контекста блока и <span> для контекста inline-block (нормальное поведение этих тегов)

Bootstrap3.visible- *.hidden- * display inline