Блог

Главная - Вопросы по программированию - Bootstrap 3 смешивает несколько make- * -столбцов

Bootstrap 3 смешивает несколько make- * -столбцов

#twitter-bootstrap-3 #less #mixins

#twitter-bootstrap-3 #Меньше #смешивания

Вопрос:

Я использую конкретное смешивание, пытаясь сделать мой код более понятным. Поэтому вместо использования:

 <div class="col-lg-3 col-md-5 col-sm-6 col-xs-12">

Я использую:

 <div class="stackOverflowRocksIt">

и в моих mixins.меньше:

 .stackOverflowRocksIt{
    .make-lg-column(3);
    .make-md-column(4);
    .make-sm-column(6);
    .make-xs-column(12);
}

Он работает правильно с видовыми экранами XS и SM, но не при изменении размера на MD или LG (тогда используется размер SM). Является ли это правильным способом создания столбцов для разных размеров видовых экранов? Есть идеи?

Комментарии:

1. Если я правильно понимаю, вам нужно вызвать их в обратном порядке (т. Е. xs to lg ), В противном sm случае Стили переопределяются md , и lg поскольку все они задаются только min-width с помощью запроса (без вывода max-width ). Кстати., то же самое применимо для порядка классов HTML — т. Е. Меньший должен идти первым.

2. Это так! Большое спасибо! Если вы напишете это как ответ, я приму его.

3. На всякий случай, чтобы исправить мой комментарий выше. «Порядок классов HTML» на самом деле не имеет значения — важен только их порядок в CSS.

Ответ №1:

Вам следует изменить порядок ваших вызовов mixin:

 .stackOverflowRocksIt {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(3);
}

@seven-phases-max прав. Код Bootstrap в первую очередь предназначен для мобильных устройств, что означает, что вы должны запускать свой код для наименьшей ширины экрана, а также функций и свойств, когда размер экрана становится больше.

Bootstrap использует медиа-запросы CSS, чтобы сделать код CSS адаптивным. В вашей ситуации .make-lg-column(3); компилируется в код CSS, который показан ниже:

 @media (min-width: 1200px) {
  .stackOverflowRocksIt {
    float: left;
    width: 25%;
  }
}

Если вы пишете .make-md-column(4); после .make-lg-column(3); @media (min-width: 992px) того, как придет воля @media (min-width: 1200px) , а также вычисляет true для экранов шире 1200 пикселей и, таким образом, перезаписывает ваш код больших столбцов.

Метки: