Решение проблемы с классом col-xs-* в Bootstrap 4

Быстрый ответ

В Bootstrap 4 класс col-xs-* из третьей версии переосмыслен в col-* для обозначения колонок на одних из самых малых экранах. Для настройки всей доступной ширины на мобильных устройствах применяйте col-12. Для больших экранов воспользуйтесь классами col-sm-*, col-md-*, col-lg-*, col-xl-*. Ниже приведен пример двухколоночной верстки для малых экранов:

<div class="row">
  <div class="col-12 col-sm-6">Первая колонка – я занимаю всю ширину экрана на малых экранах! 😎</div>
  <div class="col-12 col-sm-6">Вторая колонка – я тоже занимаю всю ширину экрана на малых экранах! 😫</div>
</div>

В данном примере на малых экранах колонки распространяются на всю ширину, а начиная с малых экранов – занимают половину доступного пространства.

Понимание изменений в сетке Bootstrap 4

Сетка Bootstrap 4 претерпела серьезные изменения с акцентом на мобильный дизайн. От окончательного использования col-xs-* из Bootstrap 3 следует отказаться. Для адаптивной верстки:

• Замените col-xs-* на col-*. Так, col-xs-6 следует заменить на col-6.
• Для смещения колонок используйте offset-* вместо col-xs-offset-*.
• Изучите особенности процесса с breakpoints. Например, col-md-12 используется для отображения на средних и больших экранах.

Эти правила помогут вам эффективно использовать новые возможности Bootstrap без возврата к устаревшиим классам.

Смещение и выравнивание

Регулировка отступов между колонками

Если вы хотите создать дополнительное пространство между колонками, используйте класс offset-*. col-md-offset-* при этом является устаревшим подходом. Пример смещения одной из колонок:

<div class="row">
  <div class="col-8">Первая колонка – я люблю занимать больше места! 😌</div>
  <div class="col-2 offset-2">Вторая колонка – и я тоже хочу немного места! 🚀</div>
</div>

Подробнее об этом расскажет наш спикер на видео

Выравнивание текста и адаптивная ширина колонок

Выравнивание текста – это искусство организации пространства. Применяйте классы выравнивания текста в Bootstrap, такие как text-center. В Bootstrap 4 col-12 на всех устройствах растягивает колонки по всей ширине.

Визуализация

Продемонстрируем, почему col-xs-* стал устаревшим в Bootstrap 4, на примере обновления телефона:

Старый телефон (📱): `col-xs-*` подходит мне. Благодарю! 🙏  (Bootstrap 3)
Новый телефон (📱✨): `col-*` более подходящий для меня! 😇 (Bootstrap 4)

Старое зарядное устройство неподходяще для нового устройства:

Старое зарядное (🔌📱) = `col-xs-*`
Новый телефон (📱✨): «К сожалению, не поддерживается 😕»

Правильное зарядное устройство должно использоваться для нормального функционирования:

Новое зарядное (🔌📱✨) = `col-*`
Новый телефон (📱✨): «Теперь всё идеально! 😎»

Использование устаревших классов Bootstrap для новых версий фреймворка не рекомендуется.

Продвинутое использование

Настройка с помощью Sass

Если вы разрабатываете старый проект, можно использовать Sass для временного эмулирования col-xs-* в Bootstrap 4. В долгосрочной перспективе рекомендуется перейти на актуальные стандарты.

Нюансы работы с сеткой

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

Устранение проблем с сеткой

Если макет ведёт себя непредсказуемо:

• Убедитесь в отсутствии скрытых стилей, мешающих корректной работе Bootstrap.
• Проверьте корректность расположения row относительно col-*.
• Исследуйте влияние JavaScript на классы и стили, которое может повлиять на поведение сетки.

Полезные материалы

1. Grid system · Bootstrap — подробное руководство по системе сеток Bootstrap 4.
2. Bootstrap 4: What’s New — обзор обновлений в Bootstrap 4.
3. Bootstrap 4 Grid Examples — примеры работы с сеткой Bootstrap 4.
4. YouTube — видеоуроки по Bootstrap 4.
5. A Complete Guide to CSS Grid | CSS-Tricks — детальное руководство по CSS Grid.
6. Newest 'bootstrap-4+grid' Questions – Stack Overflow — ответы на вопросы о сетке Bootstrap 4.
7. Bootstrap 4 Cheat Sheet – The ultimate list of Bootstrap classes — шпаргалка по классам Bootstrap 4 для экономии времени.