1

Разметка экрана

@screen-xs-max: 769px;
@screen-sm-min: 770px;
@screen-sm-max: 1440px;
@screen-md-min: 1441px;

на промежутке от 980рх до 1440рх происходит вот такая штука: введите сюда описание изображения

а должно быть так: введите сюда описание изображения

При всех других версиях экрана все работает, и даже другие row работаю корректно(вот почему и не понятно почему именно тут ошибка). Не могу понять что сделал не так. Вот ссылка на макет, там есть less файл. Если есть вопросы задавайте. Спасибо! https://drive.google.com/open?id=0B6yBSacgA5HbeXdqSEhSQ0NObUE

1 ответ 1

1

К странице в архиве подцеплены стили бутстрапа, которые отличаются от стандартных только отступами для строк и контейнеров. В них col-md-3 срабатывает для @media (min-width: 992px).

Нужно пересобрать бутстрап с вашими параметрами и подключать результат пересборки.

UPD. Пересобрал бутстрап, подставив 770px, 1441px и 2000px в @screen-sm, @screen-md и @screen-lg соответственно. С новым bootstrap.css страница выглядит так, как нужно.


Как работают классы колонок в бутстрапе

В вашем коде только одна строка меняет своё поведение при переходе от -sm- к -md-. Это строка с классом col-md-3 col-sm-6 col-xs-12.

В бутстрапе класс для узкого экрана продолжает действовать и на более широких, пока его не перебьют новым условием. Например, col-sm-12 действует на всех экранах шириной от 768 пикселей (@media (min-width: 768px)), а col-xs-12- вообще на всех.

Поэтому ваш код можно упростить:

  • вместо col-xs-12 col-sm-12 col-md-12 достаточно col-xs-12;
  • вместо col-md-4 col-sm-4 col-xs-12 достаточно col-xs-12 col-sm-4;
  • вместо col-md-8 col-sm-8 col-xs-12 достаточно col-xs-12 col-sm-8и так далее.
3
  • спасибо, буду разбираться. А почему другие row нормально функционируют тогда. Я понял в чем проблема, не понял почему она возникла в одном месте 14 мая 2016 в 13:15
  • @АлександрАлексеев В вашем коде только эта строка меняет своё поведение при переходе от sm к md. Добавил к ответу объяснение. 14 мая 2016 в 13:47
  • теперь понял, еще раз спасибо! 14 мая 2016 в 14:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.