Можно ли в Bootstrap 3 добавить классы меньше чем .col-xs-*?

Question

[Сергей Ч.]

Добрый день!
есть проблема: на горизонтальной ориентации мобильных телефонов верстка нормально отображается(это соответствует .col-xs-*).
но при вертикальной ориентации все плывет и накладывается друг на друга (ширина примерно в 2 раза меньше).

Как-то можно решить эту проблему?

P.S. бутстраповскую верстку только осваиваю. Буду рад любому совету :)

Answer 1

[Дмитрий Карякин]

Поправлю .col-xs-* соответствует размерам экрана от 0px - 768px. Bootstrap в первую очередь mobilefirst фреймворк. Из этого следует что сначала делается верстка для самого маленького размера экрана (320px - 768px) потом ч/з mediaquery добавляются стили для планшета и.т.д, а из этого следует --> что нормально показывается на вертикальном мобильном экране, должно без всяких дополнительных стилей, нормально, показываться на горизонтальном.

Ответ на вопрос: Да можно. Для этого нужны навыки работы с less или sass. Нужно качать исходники и использовать миксины bootstrap-3.3.6\less\mixins\grid.less и bootstrap-3.3.6\less\mixins\grid-framework.less. Там можно будет задать имя новых колонок, ширину полей и размеры экрана при которых они будут срабатывать.

Answer 2

[Григорий]

Самому этого не требовалось, но скорее всего так будет работать.

Надо дополнить исходники bootstrap необходимым кодом в файле less/mixins/grid.less по принципу блоков .make-xs-*, в файл less/grid.less добавить генерацию новых классов и пересобрать bootstrap самому.

Возможно есть еще несколько мест, где надо что-то подправить. Экспериментируйте!

Answer 3

[Кирилл Михайлович]

Может и костыль - но железно.

@media screen (max-width: 360px) {
	.col-xs-*.customClass {
		width: 100%;
		min-width: 320px;
		min-height: *px;
		display: inline-block;
	}
}