Bootstrap. Правильное использование col

@Михаил87 · Регистрация: 22.02.2012

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

Добрый день!
В доках bootstrap вычитал, что значение xx в col-уу-xx в сумме не должно превышать 12. А если мне нужно, чтобы на sm и xs у меня блок был на всю ширину, как быть? Можно ли сделать, что-то подобное:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        </div>
    </div>
</div>

Будет ли считаться это ошибкой или дурным тоном в верстке?
Как поступать в таких случаях?
У меня два варианта в голову пришло - первый показан выше а второй- использовать два row, один с hidden-sm + hidden-xs а второй с hidden-lg + hidden-md.

@Fedor92 · 30.08.2016, 18:12

Михаил87, а почему же Вы решили, что Ваш метод неверен?

Это очень даже хороший тон, который ничему не противоречит... Обычный миксированный стиль для мобильных и десктопных версий... Даже в мануале по bootstrap этот подход должен быть описан... Вот примерна сайте w3schools...

@Михаил87 · 30.08.2016, 18:26 **[ТС]**

Fedor92, я так решил, потому что там col-xs-12 у трех div в одном row)) В доках написано, что они сместятся вниз при сумме col больше 12. Но там не написано, хорошо это или плохо, можно так делать или нет. Поэтому и решил уточнить.

@Fedor92 · 30.08.2016, 18:29

Сообщение от Михаил87

В доках написано, что они сместятся вниз при сумме col больше 12

У Вас же сумма не превышает 12, так что всё ровно...

А на версиях, где указана ширина 12 они просто встанут в столбик и вытянутся на всю ширину, так, что всё получится так как Вы хотите...

@Omion · 31.08.2016, 11:43

Все ровно у тебя. Так и делай.

@deller · 31.08.2016, 13:33

Насколько я помню col-sm-12 и col-xs-12 можно не добавлять.

@Omion · 31.08.2016, 16:05

deller, либо совсем не добавлять и крутить ручками либо добавлять и везде, sm требуется редко а вот xs постоянно. Вообще можно на медиа выруливать, на 992. Там немного правок а на 767 бутстрап складываться начинает и вот там пойдет xs медиа вообще сильно сокращает.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.08.2016, 18:12
	Михаил87, а почему же Вы решили, что Ваш метод неверен? Это очень даже хороший тон, который ничему не противоречит... Обычный миксированный стиль для мобильных и десктопных версий... Даже в мануале по bootstrap этот подход должен быть описан... Вот примерна сайте w3schools... 0

@Михаил87 7 / 7 / 3 Регистрация: 22.02.2012 Сообщений: 114
	30.08.2016, 18:26 [ТС]
	Fedor92, я так решил, потому что там col-xs-12 у трех div в одном row)) В доках написано, что они сместятся вниз при сумме col больше 12. Но там не написано, хорошо это или плохо, можно так делать или нет. Поэтому и решил уточнить. 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	31.08.2016, 11:43
	Все ровно у тебя. Так и делай. 0

@deller 20 / 25 / 12 Регистрация: 26.06.2013 Сообщений: 111
	31.08.2016, 13:33
	Насколько я помню col-sm-12 и col-xs-12 можно не добавлять. 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	31.08.2016, 16:05
	deller, либо совсем не добавлять и крутить ручками либо добавлять и везде, sm требуется редко а вот xs постоянно. Вообще можно на медиа выруливать, на 992. Там немного правок а на 767 бутстрап складываться начинает и вот там пойдет xs медиа вообще сильно сокращает. 0

Bootstrap. Правильное использование col

Решение