bootstrap 4: список встроенных элементов для разных точек останова - PullRequest
Новая
       9

bootstrap 4: список встроенных элементов для разных точек останова

0 голосов
/ 17 сентября 2018

как я могу выровнять элементы списка друг над другом для точки останова <= 575px (xs), и выровнять элементы рядом друг с другом для точки останова> 575px (sm) со свойствами отображения начальной загрузки?

Согласно Как отобразить список встроенным с помощью начальной загрузки Twitter Я могу использовать «list-inline».Пример: 

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


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Это работает в целом, но как это работает в отношении точек останова?Обычно bootstrap позволяет установить точку останова в нотации, например, 'd-sm-block' (видимый только на min-width: 576px), но в документации ничего не говорится о 'list-inline' в этом отношении.

Ответы [ 2 ]

0 голосов
/ 23 июля 2019

Bootstrap в настоящее время не поддерживает list-inline с v4.3 - это всего лишь служебная функция для всех точек останова. Я также не вижу никаких признаков того, что это будет поддерживаться в будущих версиях, поскольку shiplist v4.4 в Github и далее не имеет ссылок на это.

Чтобы получить то, что вы ищете, используя только утилиты Bootstrap, вам нужно использовать Display класс утилит d-{breakpoint}-inline-flex. Служебный класс ml-{breakpoint}-{size} Spacing также можно использовать для пробелов, чтобы продолжать поддерживать настройки поведения точек останова.

Откройте фрагмент ниже в Полная страница или Разверните фрагмент режим, чтобы увидеть результат: 

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

<ul class="list-unstyled d-sm-inline-flex">
  <li>Lorem ipsum</li>
  <li class="ml-sm-3">Phasellus iaculis</li>
  <li class="ml-sm-3">Nulla volutpat</li>
</ul>
0 голосов
/ 17 сентября 2018

Как указано в документации , классы Display работают для любого типа значения CSS display:.Там форма d-sm-inline или d-sm-inline-block также будет работать.

...