Пытаюсь сделать html шаблон с использованием bootstrap 3, при большом масштабе все хорошо, но если масштаб уменьшить все очень не красиво смещается.
http://dostup[dot]htmlmapgenerator[dot]ru/
1. Telnet - 18 Июля, 2015 - 14:10:56 - перейти к сообщению
2. DelphinPRO - 18 Июля, 2015 - 15:15:28 - перейти к сообщению
в бутстрапе используется подход называемый mobile first. Это значит вы сначала верстаете для маленьких экранов, потом медиазапросами под большие.
Сначала уменьшите окно браузера и сверстайте свою шапку так, что бы она нормально смотрелась
Потом пишете правило
@media (min-width: $screen-sm-min) {
// ...
}
И внутри переопределяете стили так, чтобы шапка нормально смотрелать на ширине от $screen-sm-min (по умолчанию - 768)
Далее - @media (min-width: $screen-md-min) {} и @media (min-width: $screen-lg-min) {}
(Добавление)
кстати, классы col-lg-* действую только на больших экранах.
Для поменьше нужно писать col-md* и col-sm*
Можно комбинировать
<div class="col-sm-10 col-md-8 col-lg-6">
на маленьком колонка будет занимать 10 колонок
на среднем - восемь
на большом - шесть
Сначала уменьшите окно браузера и сверстайте свою шапку так, что бы она нормально смотрелась
Потом пишете правило
@media (min-width: $screen-sm-min) {
// ...
}
И внутри переопределяете стили так, чтобы шапка нормально смотрелать на ширине от $screen-sm-min (по умолчанию - 768)
Далее - @media (min-width: $screen-md-min) {} и @media (min-width: $screen-lg-min) {}
(Добавление)
кстати, классы col-lg-* действую только на больших экранах.
Для поменьше нужно писать col-md* и col-sm*
Можно комбинировать
<div class="col-sm-10 col-md-8 col-lg-6">
на маленьком колонка будет занимать 10 колонок
на среднем - восемь
на большом - шесть