Когда нужно применять .col классы в bootstrap?

@BlacKCheT · Регистрация: 11.03.2018

Студворк — интернет-сервис помощи студентам

Добрый вечер, объясните пожалуйста 1 момент по Bootstrap'y.

1) Когда использовать col-sm -col-md col-lg и их подобные

2) Что делает Container и Wrap;

3) Можно еще дополнить важные моменты с которыми могу столкнуться.

@AlexZaw · 04.01.2019, 17:37

BlacKCheT, http://bootstrap-4.ru/docs/4.2.1/layout/grid/

@BlacKCheT · 04.01.2019, 18:17 **[ТС]**

Да я там был уже)))))))))))))))))0

Грубо говоря я так понял.. Если я задам везде col-md, то на телефоне макет "поедет".. Мне нужно в медиа запросах менять это все? т.е расписывать хотя бы три медиа запроса и там это все менять?

@6elka1703 · 04.01.2019, 18:20

BlacKCheT, col-sm - это для маленьких экранов, md- для средних, lg - для больших. По ширине смотрите на сайте бутстрапа. Но если съезжает то конечно нужно в медиа-запросах править.

@AlexZaw · 04.01.2019, 18:22

BlacKCheT, вам нужно указывать количество колонок, которые занимает элемент, для каждого размера экрана, если они будут меняться. От меньшего экрана к большему. Если вы везде зададите col-md, то это значит что указанное количество колонок у элемента будет на размерах экрана от md и выше, а для меньших размеров сетка действовать не будет.
Поэтому на телефоне у вас все и "едет"

@BlacKCheT · 04.01.2019, 18:36 **[ТС]**

Как лучше сделать:

1) Сделать отдельный CSS файл и там все запросы расписать или в конце главного CSS?

2)sm,md,lg прописывать сразу в главном макете? Пример:

HTML5
1
<header class="container-fluid col-md-12 (мне их тут все нужно прописывать?)">

Добавлено через 4 минуты
Я еще не делал для мобилки, сделал только на своем пк..

@AlexZaw · 04.01.2019, 18:40

Сообщение от BlacKCheT

Сделать отдельный CSS файл и там все запросы расписать или в конце главного CSS?

Все запросы у вас прописаны в файле бутстрапа

Сообщение от BlacKCheT

Вот только не для контейнера, а для его содержимого. Контейнер или на всю ширину экрана, или заданной ширины, которая меняется автоматически при изменении ширины экрана. А так да, все изменения для каждого элемента который должен изменяться. Всяческие col/push/offset и т.д. и т.п. Именно поэтому я и не пользуюсь бутстрапом в своих работах

@BlacKCheT · 04.01.2019, 18:58 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
// Экстрамалые девайсы тут меняю у всех на col-sm? («телефоны», < 576px)
@media (max-width: 575.98px) { ... }
 
// Малые девайсы а тут  меняю у всех на col-md? («ландшафтные», < 768px)
@media (max-width: 767.98px) { ... }
 
// Средние девайсы  а тут  меняю у всех на col-lg?(«таблетки», < 992px) 
@media (max-width: 991.98px) { ... }
 
// Большие девайсы а тут уже меняю у всех на col-xl? (большие десктопы, < 1200px)
@media (max-width: 1199.98px) { ... }

Добавлено через 1 минуту
А как вы адаптивите? Свои работы

Добавлено через 7 минут
Как все запросы в файле бутстрапа если я через CDN подключил?

Добавлено через 2 минуты
Еще вопрос, вот у меня макет с фиксированной шириной 1200px, заходит на сайт челик с 4к от Асус, что будет с его глазками?

Добавлено через 52 секунды
А точнее как будет выглядеть макет? Увеличит до норма или все будет печально?

Добавлено через 56 секунд
Под "Запросами" имел ввиду media quaries

@AlexZaw · 04.01.2019, 19:18

Сообщение от BlacKCheT

тут меняю у всех на col-sm?

Ммм, не тут, вся адаптация происходит в хтмл, т.е. примерно так:

HTML5
1
2
3
4
<div class="row">
  <div class="item col-lg-6 col-md-4 col-sm-9"></div>
  <div class="item col-lg-6 col-md-8 col-sm-3"></div>
</div>

CSS
1
2
3
4
.item{
  border: 1px solid #000;
  height: 50px;
}

Сообщение от BlacKCheT

Как все запросы в файле бутстрапа если я через CDN подключил?

Вот в подключаемых через CDN файлах бутстрапа и прописаны все изменения.
Вот посмотрите на этот пример тут тоже подключение бутстрапа происходит с помощью CDN, но тем не менее все стили бутстраповских классов уже определены. Как можете видеть стилей для кнопок я никаких не задавал, они уже прописаны в файлах бутстрапа.

Сообщение от BlacKCheT

А как вы адаптивите?

Для этого я использую сетку smartgrid. Мне она больше по душе тем, что не надо для каждого адаптируемого элемента городить кучу классов в хтмл. Все делается в css легко и просто, без использования дополнительных классов

Добавлено через 1 минуту

Сообщение от BlacKCheT

Еще вопрос, вот у меня макет с фиксированной шириной 1200px, заходит на сайт челик с 4к от Асус, что будет с его глазками?

Ничего не будет, будет ваш макет с шириной 1200px по центру экрана

Кстати вы можете добавить свои запросы в конце вашего css файла, никто вам не запрещает

@BlacKCheT · 04.01.2019, 19:28 **[ТС]**

Лучше нативная смерть, чем фреймворковая жизнь.
WBW&WBR - Alexandr. Спасибо.

Добавлено через 2 минуты
Но все же лучше посмотрю ваш вариант сеток. =)

Добавлено через 2 минуты
Ну да, но я же сделаю а потом какой-нибудь фронтовик увидит и разноется что я не по стандартам сделал.

@AlexZaw · 04.01.2019, 19:31

Сообщение от BlacKCheT

Но все же лучше посмотрю ваш вариант сеток. =)

Найдите на youtube канал Дмитрия Лаврика, smartgrid его изобретение, и на своем канале он про него немного рассказывает.

@BlacKCheT · 04.01.2019, 19:43 **[ТС]**

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

Когда нужно применять .col классы в bootstrap?

Решение

Решение

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422

	Когда нужно применять .col классы в bootstrap? 04.01.2019, 17:32. Показов 3515. Ответов 11 Метки bootstrap (Все метки) Добрый вечер, объясните пожалуйста 1 момент по Bootstrap'y. 1) Когда использовать col-sm -col-md col-lg и их подобные 2) Что делает Container и Wrap; 3) Можно еще дополнить важные моменты с которыми могу столкнуться. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	04.01.2019, 17:37
	BlacKCheT, http://bootstrap-4.ru/docs/4.2.1/layout/grid/ 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	04.01.2019, 18:17 [ТС]
	Да я там был уже)))))))))))))))))0 Грубо говоря я так понял.. Если я задам везде col-md, то на телефоне макет "поедет".. Мне нужно в медиа запросах менять это все? т.е расписывать хотя бы три медиа запроса и там это все менять? 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	04.01.2019, 18:20
	BlacKCheT, col-sm - это для маленьких экранов, md- для средних, lg - для больших. По ширине смотрите на сайте бутстрапа. Но если съезжает то конечно нужно в медиа-запросах править. 1

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	04.01.2019, 18:22
	Сообщение было отмечено BlacKCheT как решение Решение BlacKCheT, вам нужно указывать количество колонок, которые занимает элемент, для каждого размера экрана, если они будут меняться. От меньшего экрана к большему. Если вы везде зададите col-md, то это значит что указанное количество колонок у элемента будет на размерах экрана от md и выше, а для меньших размеров сетка действовать не будет. Поэтому на телефоне у вас все и "едет" 1

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	04.01.2019, 19:28 [ТС]
	Лучше нативная смерть, чем фреймворковая жизнь. WBW&WBR - Alexandr. Спасибо. Добавлено через 2 минуты Но все же лучше посмотрю ваш вариант сеток. =) Добавлено через 2 минуты Ну да, но я же сделаю а потом какой-нибудь фронтовик увидит и разноется что я не по стандартам сделал. 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	04.01.2019, 19:43 [ТС]
	0