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

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

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

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

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

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

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

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


<span class="p">@media (</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-xs-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}
</span>
внутри 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

 

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

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