Рубрики
CSS, Boostrap HTML Программирование

сдвиги блоков, div, кнопок, картинок и т.п. CSS, Bootstrap

чтобы объект “съехал” нужно применить к нему стиль float:

со значением:

  • left;     – влево
  • right;  – вправо

сдвигает весь элемент, включая рамку, отступы и ширину рамки в указанном направлении (влево или вправо).

в Bootstrap это организовано добавлением класса уже содержащего этот стиль:

xx – число от 1 до 12 ширина сдвига, равная ширине колонки такого же формата. Эта ширина задается в процентах и ее можно увидеть в boostrap.css файле

отличия всех -sm-, -xs-,-md- классов в том, что у Boostrap есть 3 основных вида разрешения экрана контролируемых через

@media (max-width: @screen-xs-max) { ... }

внутри boostrap.css таблицы стилей.
Итак, классы для:

для сдвига вправо:

  • col-sm-push-xx
  • col-xs-push-xx
  • col-md-push-xx

для сдвига влево:

  • col-sm-pull-xx
  • col-xs-pull-xx
  • col-md-pull-xx

чтобы сдвинуть колонки ВЛЕВО за счет увеличения свойства CSS margin-left (левого промежутка или поля между колонками) нужно использовать эти классы CSS из комплекта Boostrap:

только для сдвига влево:

  • col-sm-offset-xx
  • col-xs-offset-xx
  • col-md-offset-xx

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *