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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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