Bootstrap 3x Организация размеров столбцов внутри медиа-запросов

С тех пор, как я работаю над отзывчивыми сайтами, я очень привык к определению ширины столбцов внутри медиа-запросов...

Например.

@media (min-width: @screen-sm-min) { #main-header { .make-xs-column(12) }
}
@media (min-width: @screen-md-min) { #main-header { .make-xs-column(6) }
}

Но теперь, когда мы имеем столбцы xs/sm/md/lg в Boostrap 3, это похоже на неправильный способ сделать что-то. Я почти склонен сделать отдельный LESS файл для фактической ширины столбцов, что означало бы просто расширение моих классов CSS с помощью этих миксинов без необходимости фактически обтекать объявления ширины столбцов внутри медиа-запросов.

Я надеюсь в этом есть смысл? Скорее всего, я вхожу в рамки со странного угла!

Обнаживает, что все остальные занимаются этим, моя главная забота - чистить код.

Спасибо, Фил

1 ответ

Если вы заглянете в Bootstrap: https://github.com/twbs/bootstrap/blob/master/less/mixins.less

вы можете найти, что такие микшины. make- * -column имеют медиа-запросы и используют эти микшины внутри других медиа-запросов очень плохо.

.make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; min-height: 1px; padding-left: (@gutter / 2); padding-right: (@gutter / 2); @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); }
}

licensed under cc by-sa 3.0 with attribution.