Bootstrap 3 - Сетка

Система сеток Twitter Bootstrap 3 - это быстрый и легкий путь для создания макета сайта.

Сетки Bootstrap применяют при разработке макетов веб-страниц и для создания разметки блоков, в которых необходимо обеспечить правильное расположение элементов. Разрабатывать сетку начинают с контейнера, который имеет фиксированную или плавающую ширину.

Контейнер с фиксированной шириной (<div class="container"></div>) имеет строго определенную ширину, которая изменяется при изменении ширины рабочей области окна браузера и ориентируется в горизонтальном направлении по центру, с помощью свойств margin-left:auto и margin-right:auto. Также, контейнер задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

Ширина контейнера (.container) Ширина рабочей области окна браузера
1170px Больше или равна 1200px
970px Больше или равна 992px и меньше 1200px
750px Больше или равна 768px и меньше 992px
Ширина контейнера равна ширине рабочей области окна браузера Меньше 768px
Контейнер Bootstrap с фиксированной шириной

Контейнер с плавающей шириной (<div class="container-fluid"></div>) занимает всю ширину окна браузера и задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

Контейнер Bootstrap с плавающей шириной

Следующим этапом является размещение рядов (блоки div с классом .row) внутри контейнера. Ширина рядов (<div class="row"></div>) будет равна ширине контейнера, т.к. данный блок имеет отрицательные внешние отступы слева и справа по 15рх (margin-left:-15px и margin-right:-15px).

Ряд Bootstrap, размещенный в контейнере

Внутри ряда помещаются блоки с классом col-*-*, внутри которых размещается содержимое или другие ряды. Ширина блоков с классом col-*-* задаётся в относительной форме с помощью указания количества колонок Bootstrap. Так как ряд в Bootstrap по умолчанию состоит из 12 колонок, то минимальная ширина блока col-*-* равна одной колонке Bootstrap, а максимальная ширина блока col-*-* равна 12 колонкам Bootstrap.

Ряд, состоящий из 12 колонок Bootstrap

Например, если мы хотим создать в ряду 3 блока с одинаковой шириной, то нам необходимо установить ширину этих блоков равным 4 колонкам Bootstrap (<div class="col-*-4">...</div>).

3 блока одинаковой ширины, которые размещены в ряду

Например: Рассчитать ширину блока в пикселях можно следующим образом:
[Ширина блока] = [Ширина колонки Bootstrap]*[Количество колонок, из которых состоит блок],
где: [Ширина колонки Bootstrap] = [Ширина ряда (row)] / 12.

Расчёт ширины блока

[Ширина колонки Bootstrap] = 970 / 12 = 81px.
[Ширина блока] = 81 * 4 = 324px.

Для создания макетов веб-страниц под различные устройства (смартфоны, планшеты, ноутбуки и персональные компьютеры) необходимо воспользоваться предопределенными классами сеток Twitter Bootstrap 3.

Например, вы можете использовать класс .col-xs-* для создания сетки для устройств с маленьким экраном, таких как смартфоны. Точно так же класс .col-sm-* - для устройств с небольшим экраном, таких как планшеты, класс .col-md-* – для устройств с экраном средних размеров, таких как персональные компьютеры и ноутбуки, а так же,  класс .col-lg-* - для устройств с большим экраном.

Следующая таблица обобщает некоторые ключевые особенности новой системы сеток Bootstrap 3.

Особенности системы сеток Bootstrap 3 Крохотная ширина экрана
Смартфоны
(<768px)
Маленькая ширина экрана
Планшеты
(≥768px и <992)
Средняя ширина экрана
Ноутбуки
(≥992px и <1200px)
Большая ширина экрана
Компьютеры
(≥1200px)
Ширина контейнера
фиксированного
макета
(.container)
Равна ширине рабочей области окна браузера 750px 970px 1170px
Ширина контейнера плавающего макета (.container-fluid) Равна ширине рабочей области окна браузера
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Максимальная ширина колонки Bootstrap для контейнера с фиксированной шириной (.container) Ширине рабочей области окна браузера / 12 ~62px (750px / 12) ~81px (970px / 12) ~97px (1170px / 12)
Максимальная ширина колонки Bootstrap для контейнера с плавающей шириной (.container-fluid) Ширине рабочей области окна браузера / 12
Внутренние отступы для содержимого блоков, состоящих из колонок Bootstrap 15px с левой и правой стороны блока

Примечание:

Если вы применяете класс .col-sm-* к блоку, то это повлияет не только на разметку для устройств, с маленьким экраном (планшеты), но также на устройства со средним и большим экранами, если Вы не указали классы .col-md-* и .col-lg-*. Аналогично, класс .col-md-* будет влиять на разметку не только для устройств со средним экраном, но и на устройства с большим экраном, если класс .col-lg-* не указан.

Создание макета сайта с помощью системы сеток Twitter Bootstrap 3

С новой системой сеток Twitter Bootstrap 3 вы можете легко контролировать отображение макета сайта на различных устройствах, которые имеют различную ширину экрана.

В качестве примера рассмотрим процесс разработки макета сайта, состоящего из 3 блоков для всех устройств. Разрабатываемый макет на различных устройствах (смартфоны, планшеты, ноутбуки, персональные компьютеры) будет выглядеть по-разному. Например, на смартфонах эти блоки располагаются вертикально, а на большом экране персонального компьютера они размещаются горизонтально. То есть наш макет будет автоматически изменяться при достижении предельных значений ширины окна браузера.

Макет сайта, состоящего из 3 блоков

Макет сайта для устройства с большим экраном (width >=1200px) состоит из трёх блоков, расположенных горизонтально, которые занимают всю ширину контейнера. Первый блок имеет ширину равную половине ширины контейнера (col-lg-6), второй блок занимает одну четвертую от ширины контейнера (col-lg-3), и третий блок тоже занимает одну четвертую от ширины контейнера (col-lg-3).

Макет сайта для устройства с большим экраном

<div class="container">
  <div class="row">
    <div class="col-lg-6" style="height:300px; background:green;">Блок №1</div>
    <div class="col-lg-3" style="height:100px; background:orange;">Блок №2</div>
    <div class="col-lg-3" style="height:150px; background:blue;">Блок №3</div>
  </div>
</div>

Макет сайта для устройства со средним экраном (width >=992px и <1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом .clearfix, который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс .visible-md-block. Ширина 3 блока равна ширине контейнера (col-md-12).

Макет сайта для устройства со средним экраном

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8" style="height:300px; background:green;">Блок №1</div>
    <div class="col-lg-3 col-md-4" style="height:100px; background:orange;">Блок №2</div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-12" style="height:150px; background:blue;">Блок №3</div>
  </div>
</div>

Аналогичным образом настроим макет для остальных устройств. Макет сайта для устройства с маленьким экраном (width >=768px и <992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 col-sm-12" style="height:300px; background:green;">Блок №1</div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="height:100px; background:orange;">Блок №2</div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-12 col-sm-6" style="height:150px; background:blue;">Блок №3</div>
  </div>
</div>

Макет сайта для устройства с крохотным экраном (width <768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12" style="height:300px; background:green;">Блок №1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="height:100px; background:orange;">Блок №2</div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-12 col-sm-6 col-xs-12" style="height:150px; background:blue;">Блок №3</div>
  </div>
</div>
Примечание: Для устройств с очень маленькой шириной экрана (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 col-sm-12" style="height:300px; background:green;">Блок №1</div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="height:100px; background:orange;">Блок №2</div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-12 col-sm-6" style="height:150px; background:blue;">Блок №3</div>
  </div>
</div>

Twitter Bootstrap 3 содержит адаптивные служебные классы, которые позволяют включить отображение элементов только на определённых устройствах, размеры экранов которых попадают в соответствующий диапазон.

В Twitter Bootstrap 3.2 добавлена поддержка свойства CSS display для класса .visible. Новая возможность позволяет задавать видимость таким элементам, как inline, block и inline-block на различных экранах. Например, класс .visible-md-block включает видимость элемента, если он является блочным (block) и текущая ширина рабочей области окна браузера соответствует диапазону md (width >=992px и <1200px).

Класс
Описание
.visible-xs-* Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы.
.visible-sm-* Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы.
.visible-md-* Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы.
.visible-lg-* Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы.

Примечание: Вы также можете совместно использовать эти классы для того, чтобы элементы были видны на нескольких устройствах. Например, вы можете применить класс .visible-xs-* и .visible-md-* на любой блок, чтобы сделать его видимым на устройствах и с очень маленьким и с средним экраном.

Подобным образом, вы можете использовать ниже перечисленные служебные классы, чтобы скрыть отображение элементов на определенных устройствах.

Класс Описание
.hidden-xs Скрыть эти элементы только для устройств, имеющих экран шириной менее 768px. На других устройствах эти элементы видимы.
.hidden-sm Скрыть эти элементы только для устройств, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше 992px. На других устройствах эти элементы видимы.
.hidden-md Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы видимы.
.hidden-lg Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы видимы.

Совет: Вы также можете совместно использовать эти классы, чтобы блоки не были видны на нескольких устройствах. Например, вы можете применить классы .hidden-xs и .hidden-md к блоку на веб-странице, чтобы сделать этот блок невидимым на устройствах с очень маленьким и средним экраном.

<p class="visible-xs-block">
  Это параграф будет виден только на смартфонах.
</p>
<p class="visible-sm-block">
  Это параграф будет виден только на планшетах.
</p>
<p class="visible-md-block">
  Это параграф будет виден только на устройствах со средним размером экрана.
</p>
<p class="visible-lg-block">
  Это параграф будет виден только на устройствах с большим экраном.
</p>

Подобно обычным адаптивным классам Twitter Bootstrap 3, можно использовать следующие служебные классы, чтобы отображать или скрывать определенные блоки при печати веб-страниц.

Класс Описание
.visible-print-block Позволяет скрыть отображение блочного элемента в браузере. При печати этот элемент будет виден.
.visible-print-inline Позволяет скрыть строчный элемент в браузере. При печати этот элемент будет виден.
.visible-print-inline-block Позволяет скрыть отображение элемента в браузере, у которого свойство display равно «inline-block» . При печати этот элемент будет виден.
.hidden-print Скрыть элемент при печати страницы. При отображении в браузере этот элемент будет виден.


   Bootstrap 1    87999 +1

Комментарии (103)

  1. Ололоев # 0
    Добрый день!
    Столкнулся с проблемой размещения col-lg по центру.
    Каким образом можно разметить один блок по центру? И да бы он был нужной мне ширины
    1. Александр Мальцев # 0
      Добрый день, Ололоев.

      Чтобы разместить блок col-lg по центру необходимо:
      1. Задать ему ширину, например 8 колонок Bootstrap:
      <div class="col-lg-8">...</div>
      2. Установить ему смещение, равное 2 колонкам Bootstrap:
      <div class="col-lg-8 col-lg-offset-2">...</div>
      Число 2 получается следующим образом: (12 (всего колонок) – 8 (ширина блока)) / 2 (на каждую сторону) = 2 колонки.

      В итоге:
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
          ...
          </div>
          <div class="clearfix visible-lg-block"></div>
          ...
        </div>
      </div>
      
      1. Сержант # 0
        <div class="col-lg-8 center-block"></div>
      2. Юрий # 0
        Здравствуйте. CMS Drupal. Такая история. Допустим есть блок, левая колонка (col-md-3) и контент (col-md-9). Например на одной из страниц сайта в левом блоке нет контента, и он автоматически скрывается. Так вот в таком случае контент смещается на 3 колонки влево.
        Вопрос. Как можно, и можно ли, сделать так, чтобы контент не смещался на 3 колонки влево, а увеличивался до col-md-12???
        1. Александр Мальцев # 0
          Здравствуйте, Юрий. Изменить класс можно только с помощью JavaScript. Также желательно блокам назначить идентификаторы.

          Для проверки содержимого левого блока использовал функцию is(:empty), которая проверяет на наличие контента в левом блоке.

          В итоге получился следующий код скрипта на jQuery:
          <body>
          <div class="container">
            <div class="row">
              <div id="leftblock" class="col-md-3"></div>
              <div id="mainblock" class="col-md-9">...</div>
            </div>
          </div>
          <script>
          $(document).ready(function() {
            if($('#leftblock').is(':empty')) {
              $('#leftblock').hide();
              $('#mainblock').removeClass('col-md-9').addClass('col-md-12');
            }
          });
          </script>
          
          1. Артем Недодаев # 0
            Юрий, я бы на вашем месте решил проблему со стороны backend, то есть что бы друпал генерируя страницу проставлял ширину блока, т.е. есть сайдбар col-md-9, а если нет col-md-12. Просто зачем лишний раз нагружать клиентскую строну?
          2. aleksandr # 0
            молодец, хороший мануал
            1. Павел # 0
              Отличный мануал, наверное лучший из тех что видел.
              1. Вячеслав # 0
                Спасибо за ваши учебные статьи
                1. Сергей # 0
                  На сайте Bootstrap3 в пункте меню «Настроить» (http://bootstrap-3.ru/customize.php) есть раздел «Медиазапросы и точки прерывания». Параметры данного раздела отлично описаны в текущей статье. Однако, один параметр не упомянут и мне не понятен. Что означает переменная @screen-xs? У меня по умолчанию стоит 480 px.
                  Автору статей большое спасибо. Для начинающих, как я, реальная помощь
                  1. Александр Мальцев # 0
                    Переменная @screen-xs является устаревшей и, начиная с версии Twitter Bootstrap 3.0.1 не используется.
                  2. Мари # 0
                    Спасибо, очень информативный манулал в целом и статья в частности.
                    1. Arris # +1
                      Не «всегда состоит из 12 колонок», а ПО УМОЛЧАНИЮ состоит из 12 колонок.
                      1. Александр Мальцев # 0
                        Спасибо, Arris. Поправил.
                      2. Олег # 0
                        Здравствуйте Александр. Спасибо за хорошую подачу материала.
                        Вопрос по CMS Drupal. Можно ли сделать вывод представления в блок сетки?
                        1. Александр Мальцев # 0
                          Здравствуйте, Олег!
                          Спасибо за Ваш отзыв.
                          По CMS Drupal ни чего не подскажу, т.к. не работал с этой системой.
                          1. Олег # 0
                            Можно. Модуль Views Bootstrap.
                          2. ctac # 0
                            А как поступить в случае, если в блоке два, в предпоследнем примере, должен стоять баннер 300х100, к примеру. получается третий блок сьезжает для LG и выше!

                            <style>.block2{min-width: 300px;}
                            </style>
                            <div class="container">
                              <div class="row">
                                <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12" style="height:300px; background:green;">Блок №1</div>
                                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 block2" style="height:100px; background:orange;">Блок №2</div>
                                <div class="clearfix visible-md-block"></div>
                                <div class="col-lg-3 col-md-12 col-sm-6 col-xs-12" style="height:150px; background:blue;">Блок №3</div>
                              </div>
                            </div>
                            1. Александр Мальцев # 0
                              Тут много можно использовать различных вариантов.
                              Так как у Вас макет фиксированный на lg, то могу предложить такой вариант:
                              <style>
                              @media (min-width: 1200px) {
                                .container {
                                  width: 1170px !important;
                                }
                                .container .block1 { 
                                  width: 581.25px !important;
                                }
                                .container .block2 {
                                  width: 300px !important;
                                  padding: 0px;
                                }
                                .container .block3 { 
                                  width: 288.75px !important;
                                }
                              }
                              </style>
                              
                              <div class="container">
                                <div class="row">
                                  <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 block1" style="height:300px; background:green;">Блок №1</div>
                                  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 block2" style="height:100px; background:orange;">Блок №2</div>
                                  <div class="clearfix visible-md-block"></div>
                                  <div class="col-lg-3 col-md-12 col-sm-6 col-xs-12 block3" style="height:150px; background:blue;">Блок №3</div>
                                </div>
                              </div>
                              
                              Т.е. я рассчитал ширину всех контейнеров для lg вручную, т.е.
                              lg — ширина контейнера 1170px. 1 колонка Bootstrap = 1170/12 = 97.5px.
                              col-lg-6 = 97.5*6 = 585px.
                              col-lg-3 = 97.5*3 = 292.5px.
                              А Вам надо 300px, т.е. необходимо уменьшить 1 и 3 блок на 300-292.5/2 = 3.75px.
                              Т.е. 1 блок = 585px — 3.75px = 581.25px, 2 блок = 300px, 3 блок = 292.5px — 3.75px = 288.75px.

                              Можно конечно и по другому…
                            2. ctac # 0
                              И да, не предлагать вот такое решение
                              <div class="col-lg-5 col-md-8 col-sm-12 col-xs-12" style="height:300px; background:green;">Блок №1</div>
                              так сильно широко получается…
                              1. Игорь Денисов # 0
                                Добрый день!
                                У меня возник такой вопрос:
                                <div class="clearfix visible-md-block"></div>
                                — Это мы пишем для того, чтобы 3 блок располагался с новой строки и так же убираем у него обтекание. А для планшетов не нужно прописывать после первого блока
                                <div class="clearfix visible-sm-block"></div>
                                чтобы следующие два блока также располагались на новой строке и также убрать обтекание у второго блока?!
                                1. Александр Мальцев # +1
                                  Здравствуйте, Игорь!
                                  Это мы пишем для того чтобы 3 блок не обтекал предыдущие и располагался с новой строки. Т.к. модель float имеет такую особенность, что 3 блок может пристроиться к правой стороне 1 блока (если высота 1 блока будет больше чем 2-ого).

                                  Обтекание мы убираем у пустого блока, который имеет класс clearfix. А третий блок уже ничего обтекать не может, т.к. перед ним расположен этот пустой блок, который обтекать нельзя.

                                  А на sm-устройствах, 1 блок занимает всю ширину и 2 блок к нему никак не сможет пристроиться, поэтому здесь clearfix не используем.
                                  1. Игорь Денисов # +1
                                    Оказалось все элементарно )) Действительно, если высота 1-ого блока больше второго, то 3-ий будет обтекать 1-ый. Спасибо за ответ!)
                                2. Карен # 0
                                  Здравствуйте, это все прекрасно.
                                  Но столкнулся с проблемой — нужны 5 колонок равной ширины. С помощью данной сетки у меня получается их разместить ровно по центру, все работает идеально на любом экране. Но проблема в том, что ширина у них 16.67% (то есть 6 блоков в ряд), а мне нужно 20%. Как можно решить?
                                  1. Александр Мальцев # 0
                                    Здравствуйте!
                                    Наиболее простой вариант — это изменить количество колонок Bootstrap на число кратное 5. Например: 15.
                                    Это можно сделать на странице Customize. Там всего лишь надо изменить значение переменной @grid-columns в разделе Grid system на 15 и нажать внизу страницы на кнопку Compile and Download. После этого Вы получите архив Bootstrap, в котором сетка будет состоять из 15 колонок. Таким образом можно изменять данный фреймворк под свои нужды.
                                    После этого на странице Вам уже необходимо будет использовать для блоков ширину равную 3 колонкам Bootstrap для того чтобы создать данный макет.
                                  2. vind # 0
                                    Нынешние флагманы (да и не только) имеют разрешение FHD, т.е. 1080 пикселей по ширине. Получается, на них информация будет отображаться как на ноутбуках, а не как на смартфонах?
                                    1. Александр Мальцев # 0
                                      Не совсем, т.к. это физическое разрешение экрана. В смартфонах и планшетах используется упаковка пикселей в так называемые точки (на iPhone и iPad — это apple points, на Android-устройствах — это DIP).
                                      Например, если взять iPhone 5, то он имеет физическое разрешение 1136x640. Но его дисплей Retina Display имеет двойную плотность пикселей, т.е. для формировании 1 точки используются 4 физических пикселя. Его разрешение будет составлять в итоге 568x320 точек.
                                      На android-экранах разрешения экрана в точках зависит тоже от плотности экрана. Т.е. чем больше плотность экрана, тем больше физических пикселей формируют одну точку. На Android-устройствах различают следующую плотность экрана: 1, 1.33, 1.5, 2, 3. Т.е. например экран с физическим разрешением 1280x720 и плотностью 2 будет иметь разрешение в браузере 640x320 точек (DIP). А экран с физическим разрешением 1920x1080 пикселей и плотностью 3 будет иметь тоже самое разрешение в браузере — 640x320 точек (DIP). Например устройство Google Nexus 4, которое имеет физическое разрешение 1280x768px и плотность 2 будет иметь в браузере разрешение 640x368 точек (DIP). Как-то так…
                                      Т.е. ширина даже самого хорошего смартфона с большим экраном составит по ширине не больше 384 точек.
                                    2. Яков # 0
                                      Здравствуйте!
                                      Прошу Вас помочь мне с освоением Bootstrap. Необходим макет, как указан на картинке внизу. Как это сделать? Запутался с row'ами. Мне нужно все блоки в один row что ли поставить, или?..
                                      1. Александр Мальцев # 0
                                        Здравствуйте, Яков.
                                        Блок row будет только один, по-другому Вы просто не сделаете. Не совсем понял с блоком на устройстве XS.
                                        Макет будет выглядеть следующим образом:
                                        <div class="container">
                                          <div class="row">
                                            <div class="col-lg-8 col-sm-12">
                                              <div>1</div>
                                              <div>2</div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">3</div>
                                            <div class="clearfix visible-lg-block"></div>
                                            <div class="col-lg-4 col-sm-6">4</div>
                                            <div class="clearfix visible-sm-block"></div>
                                            <div class="clearfix visible-md-block"></div>    
                                            <div class="col-lg-4 col-sm-6">5</div> 
                                            <div class="col-lg-4 col-sm-6">6</div> 
                                          </div>
                                        </div>
                                        
                                        1. Алекс # 0
                                          Такой вариант возможен?
                                          <div class="container">
                                            <div class="row">
                                              <div class="col-lg-8 col-sm-12">
                                                <div>1</div>
                                                <div>2</div>
                                              </div>
                                              <div class="col-lg-4 col-sm-6">3</div>
                                              <div class="clearfix visible-lg-block"></div>
                                              <div class="col-lg-4 col-sm-6">4</div>
                                              <div class="clearfix visible-sm-block  visible-md-block"></div>
                                              <div class="col-lg-4 col-sm-6">5</div> 
                                              <div class="col-lg-4 col-sm-6">6</div> 
                                            </div>
                                          </div>
                                          1. Александр Мальцев # 0
                                            Да, так можно.
                                      2. Alex # 0
                                        Разметка:
                                        <div class="contrainer-fluid">
                                          <div class="row">
                                            <div id="header1" class="col-lg-7 col-md-7 col-sm-7 col-xs-7" style="background-color:green;">
                                              <img src="img/logo.jpg" class="logo">ГосСервисСтрой
                                            </div>
                                            <div id="header2" class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:blue;">
                                              <span class="telephone1">+79091033949</span>
                                              <span class="telephone1">+79091032949</span>
                                              <span class="consult">Закажите консультацию...</span>
                                            </div>
                                          </div>
                                        </div> 
                                        

                                        Вопрос: как мне сделать так, чтобы при достижении размера (min-width 320px) и (max-width 479px), блок div с классом col-lg-5 находился под блоком div с классом col-lg-7. Т.е. чтобы они были друг под другом на маленьких устройствах. На текущий момент, у меня получается так, что они располагаются друг за другом на экранах, имеющих размер меньше 479px, а должны быть друг под другом (вертикально).
                                        1. Александр Мальцев # 0
                                          1. Добавить к блокам идентификаторы (id). Например 1 блоку — header1, 2 — header2.
                                          HTML-код:
                                          <div class="contrainer-fluid">
                                            <div class="row">
                                              <div id="header1" class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                                ...
                                              </div>
                                              <div id="header2" class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                                ...
                                              </div>
                                            </div>
                                          </div>
                                          

                                          2. Добавить правило CSS, которое будет определять ширину блоков в диапазоне от 320px до 479px:
                                          CSS-код:
                                          @media (min-width: 320px) and (max-width: 479px) { 
                                            #header1, #header2 {
                                              width: 100%;    
                                            }
                                          }
                                          
                                          1. Алекс # 0
                                            Может прописать col-xs-12 обоим?
                                            1. Александр Мальцев # 0
                                              Адаптивные блоки с классом col-xs-* будет использоваться на устройствах, имеющих ширину <768px. А тут необходимо сделать в пределах диапазона от 320px до 479px. Тут без написания кода CSS не обойтись.
                                          2. Бутко Александр # 0
                                            Спасибо огромное!
                                            Материал изложен очень ПОНЯТНО.
                                            До этой статьи я перелопатил кучу различных источников, а здесь все как-то упорядочилось и встало на свои места.
                                            Наглядно, просто и доступно.
                                            Благодарю.
                                            1. Владимир # 0
                                              Здравствуйте. А как можно добавить разрешение. В сетке есть такие элементы как col-sm и col-xs, но col-xs начинается с слишком широкого разрешения.

                                              Как добавить разметку, чтобы например col-xs занимал 2 столбика, а [свой класс] занимал один столбик и по ширине был 320px?
                                              1. Александр Мальцев # 0
                                                По настройке платформы есть уже достаточное количество уроков.
                                                1. Самый простой способ — это использование страницы _http://getbootstrap.com/customize/
                                                В ней есть раздел Media queries breakpoints в котором необходимо установить контрольные точки для @screen-xs, @screen-sm, @screen-md и @screen-lg.
                                                После этого необходимо установить ширину контейнера для sm, md и lg в разделе Container sizes.
                                                Ещё можно установить количество колонок в переменной @grid-columns, например 24. Это позволит более точно регулировать ширину.
                                                После этого необходимо скомпилировать и получить необходимую сборку.
                                                2. Ещё есть способ с помощью переменных LESS и CSS.

                                                Настройка ширины осуществляется с помощью колонок Bootstrap.
                                                Т.е. на col-xs-4 — будет 4/24 = 16.7% от ширины контейнера в который данный блок помещён. Если необходимо, например, на md другую ширину, то выставляете её опять с помощью колонок (при 24 колонках точность может быть до 1/24), например, 9 колонок = 37.5%.

                                                Может быть необходимо в дополнение к статьям по настройке системы добавить ещё статью по настройке сетки Bootstrap?
                                              2. Иван # 0
                                                Очень полезный сайт, много понятной информации, респект и уважуха. Возник вопрос, есть ли в Bootstrap возможность менять порядок блоков. Например, есть ряд, в нем три блока col-lg-4, но при размере экрана например SM ( col-sm-6, col-sm-6, col-sm-12) сделать чтобы блок который col-sm-12 был сверху блоков col-sm-6, т.е при смене размера экрана блок перемещался грубо говоря вверх а не вниз
                                                1. Иван # 0
                                                  Прошу прощения, ответ нашелся bootstrap-3-reordering-columns-grid-system
                                                2. Станислав # 0
                                                  Добрый день. Как сделать четыре строки с одинаковой высотой и чтобы они занимали весь экран!
                                                  Сетка, имеющая четыре строки с одинаковой высотой
                                                  1. Александр Мальцев # 0
                                                    Можно сделать, например, так (использую ед. изм. vh).
                                                    Код CSS:
                                                    .col-xs-10, .col-xs-2, .col-xs-12 {
                                                      height: 25vh;
                                                    }
                                                    
                                                    Код HTML:
                                                    <body>
                                                    <div class="container-fluid">
                                                      <div class="row">
                                                        <!-- 1 строка -->
                                                        <div class="col-xs-10"></div>
                                                        <div class="col-xs-2"></div>
                                                        <!-- 2 строка -->
                                                        <div class="col-xs-12"></div>
                                                        <!-- 3 строка -->
                                                        <div class="col-xs-12"></div>
                                                        <!-- 4 строка -->
                                                        <div class="col-xs-12"></div>
                                                      </div>
                                                    </div>
                                                    </body>
                                                    
                                                    1. Станислав # 0
                                                      Александр, спасибо!
                                                      1. seventh # 0
                                                        А если тоже самое, но не задавая высоту блоков? То есть просто, чтобы высота двух колонок в строке была по высоте большего.
                                                        1. Александр Мальцев # 0
                                                          А какой в этом смысл.
                                                          Если необходимо чтобы другие распологались после них, то необходимо создать пустой блок с классом clearfix.
                                                          <div class="col-sm-6"></div>
                                                          <div class="col-sm-6"></div>
                                                          <div class="clearfix"></div>
                                                          
                                                          Если же это для чего то нужно, то оно делается через JavaScript (jQuery).
                                                          <script>
                                                          $(function(){
                                                            // проверяем ширину устройства (т.е. если это sm или выше, то...
                                                            if ($(document).width()>=768) {
                                                              var maxHeight = 0;
                                                              // определяем максимальную ширину и устанавливаем 
                                                              // её элементам у которых она меньше
                                                              $('#myId>div').each(function(){
                                                                if ($(this).height()>maxHeight) 
                                                                  maxHeight = $(this).height();
                                                              }).each(function(){
                                                                if ($(this).height()<maxHeight) 
                                                                  $(this).height(maxHeight);    
                                                              });
                                                            }
                                                          });
                                                          </script>
                                                          
                                                          Данный скрипт желательно поместить перед закрывающим тегом body. Используя JavaScript Вы можете сделать со страницей всё что угодно.
                                                          Это пример выполнен для следующей разметки:
                                                          <div class="container">
                                                            <div id="myId" class="row">
                                                              <div class="col-sm-6">...</div>
                                                              <div class="col-sm-6">...</div>
                                                            </div>
                                                          </div>
                                                          
                                                          1. seventh # 0
                                                            Простите, не совсем к правильному комментарию верхнего уровня задал вопрос.
                                                            А вопрос в том, что есть два блока в строке, необходимо, чтобы у них всегда была одинаковая высота, не смотря на высоту содержимого. Конкретно у меня в шапке логотип и название сайта. При увеличении разрешения экрана, картинка логотипа растягивается и блок с ним становиться больше в высоту, чем соседний.
                                                            Конкретный код:
                                                            <div class="col-sm-12 col-xs-12 col-lg-3 col-md-4 text-center">
                                                            			<span id="seventh_theme_logo"><img src="/user/themes/7th-theme/img/logo.gif" alt="Ali.onl" class="img-responsive center-block" /></span>
                                                            </div>
                                                            
                                                            <div class="col-sm-12 col-xs-12 col-lg-9 col-md-8">
                                                            			<span id="seventh_theme_welcome_text">
                                                            			<h1>ALIEXPRESS URL SHORTENER</h1>
                                                            			</span>
                                                            </div>
                                                            
                                                            Без скриптов реально такое реализовать?
                                                            1. Александр Мальцев # 0
                                                              Т.к. Вы не знаете какая будет высота изображения, то в данном случае только с помощью JavaScript.
                                                            2. Владимир # 0
                                                              Александр!

                                                              Огромное спасибо за доходчивую статью и конкретно этот пример!
                                                              Он отлично работает!

                                                              Не подскажете, как в этом примере можно отфильтровать нужные элементы?
                                                              У Вас в примере: #myId
                                                              А мне необходимо применить ко всем #myId_12
                                                              (где цифры самые разные)

                                                              Спасибо.

                                                              P.S. В jQuery полный нуб…
                                                              1. Владимир # 0
                                                                Нашел.

                                                                Можно использовать
                                                                $("[id^=myId_]>div")
                                                      2. igor # 0
                                                        Добрый день!
                                                        Подскажите как сделать вот такое размещение блоков…

                                                        не понимаю как сделать вариант 6
                                                        спасибо…
                                                        1. Александр Мальцев # +1
                                                          Здравствуйте.
                                                          Насколько я понимаю, Вам нужно в зависимости от ориентации.
                                                          Можно сделать так.
                                                          CSS:
                                                          @media screen and (orientation:landscape) {
                                                            #block1, #block2 {
                                                              width: 50% !important;
                                                            }
                                                          }
                                                          
                                                          HTML:
                                                          <div class="container">
                                                            <div class="row">
                                                              <div id="block1" class="col-xs-12 col-sm-6"></div>
                                                              <div id="block2" class="col-xs-12 col-sm-6"></div>
                                                            </div>
                                                          </div>
                                                          
                                                          1. igor # 0
                                                            не получается!
                                                            у меня вот какой код
                                                            <section id="первая" >
                                                            <div class="container">
                                                            	<div class="row text-center header ">
                                                            		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                            			<h1>БЛА-БЛА</h1>						
                                                            		</div>
                                                            	</div>
                                                                    <div id="блок1 "class="col-xs-12 col-sm-6  col-md-6 col-lg-6>
                                                                    	<div>
                                                            		......
                                                            		</div>
                                                                    </div>
                                                                    <div id="блок2 "class="col-xs-12 col-sm-6  col-md-6 col-lg-6> 
                                                            		<div>
                                                            		......
                                                            		</div>
                                                                    </div>
                                                            </div>
                                                            </section>
                                                            
                                                            1. igor # 0
                                                              ИЗВИНЯЮСЬ!
                                                              потерял кавычку и поэтому не получилось… :(
                                                              Все работает, Спасибо!
                                                        2. Сергей # 0
                                                          Добрый день.
                                                          Скрыл некоторые поля таблицы в мобильной версии. Как теперь сделать, чтобы при нажатии на кнопку «выехали» мои скрытые поля.
                                                          Что-то типо навигации, только в таблице
                                                          1. Александр Мальцев # 0
                                                            Здравствуйте.
                                                            Покажите, что у Вас за код (только основное). А так как-то непонятно что Вам ответить :)
                                                          2. иван # 0
                                                            Спасибо за ваши учебные статьи
                                                            1. Алексндр # 0
                                                              Здравствуйте! Подскажите пожалуйста как растянуть на все блоки фоновое изображение, чтобы не резать его в фотошопе.
                                                              <header class="site-header">
                                                              	<div class="container-fluid">
                                                              	<header class="row">
                                                              	<div class="col-md-1"></div>
                                                              			 	<div class="col-md-3"><div id="logo"></div></div>
                                                                  	<div class="col-md-4 phone"></div>
                                                                  	    	<div class="col-md-3 slogan"></div>
                                                                  	    	<div class="col-md-1"></div>
                                                                  </header>	
                                                                  <section class="row" id="middle">
                                                                  <div class="col-md-1"></div>
                                                                  <div class="col-md-3"></div>
                                                                  <div class="col-md-4 "></div>
                                                                  <div class="col-md-3"></div>
                                                                  <div class="col-md-1"></div>
                                                                  </div>
                                                                  <footer class="row">
                                                                      <div class="col-md-3"></div>
                                                                          <div class="col-md-3"></div>
                                                                          <div class="col-md-3"></div>
                                                                   	<div class="col-md-3"></div>
                                                                  </footer>
                                                              Изображение
                                                              1. Алексндр # 0
                                                                <header class="site-header">
                                                                	<div class="container-fluid">
                                                                	<header class="row">
                                                                	<div class="col-md-1"></div>
                                                                			 	<div class="col-md-3"><div id="logo"></div></div>
                                                                    	<div class="col-md-4 phone"></div>
                                                                    	    	<div class="col-md-3 slogan"></div>
                                                                    	    	<div class="col-md-1"></div>
                                                                    </header>	
                                                                    <section class="row" id="middle">
                                                                    <div class="col-md-1"></div>
                                                                    <div class="col-md-3"></div>
                                                                    <div class="col-md-4 "></div>
                                                                    <div class="col-md-3"></div>
                                                                    <div class="col-md-1"></div>
                                                                    </div>
                                                                    <footer class="row">
                                                                        <div class="col-md-3"></div>
                                                                            <div class="col-md-3"></div>
                                                                            <div class="col-md-3"></div>
                                                                     	<div class="col-md-3"></div>
                                                                    </footer>
                                                                1. Александр Мальцев # 0
                                                                  Если все ваши блоки располагаются в body, то фоновое изображение можно установить для него.
                                                                2. Алексндр # 0
                                                                  извините проблему решил следующим образом
                                                                  body {
                                                                  height: 100%;
                                                                  height: 100%;
                                                                  background: url('../img/bg-all.jpg') no-repeat;
                                                                  background-size:cover;
                                                                  }
                                                                  1. XXocTT # 0
                                                                    Очень полезная и понятная информация, спасибо! Бесят люди которые не прочитав толком статью, задают элементарные вопросы.
                                                                    1. Sergey # 0
                                                                      Здравствуйте, подскажите можно ли сделать ширину контейнера при .col-lg- в 1600px?
                                                                      Спасибо.
                                                                      1. Александр Мальцев # 0
                                                                        Сделайте свою сборку Bootstrap на странице getbootstrap.com/customize/
                                                                        Найдите на этой странице параметр @container-large-desktop и измените его (1140px + @grid-gutter-width) на (1570px + @grid-gutter-width). В итоге у вас на lg размер будет равен 1600 (1570+30).
                                                                      2. Иван # 0
                                                                        Здравствуйте! Перерыл весь интернет — не нашел ответ. Скажите, как мне сделать постоянное горизонтальное расстояние между колонками?
                                                                        <div class="col-lg-6 content"></div>
                                                                        <div class="col-lg-6 content"></div>
                                                                        <div class="col-lg-4 content"></div>
                                                                        <div class="col-lg-4 content"></div>
                                                                        <div class="col-lg-4 content"></div>
                                                                        
                                                                        Мне нужны отступы в 10px, а ширина колонок чтобы высчитывалась автоматически (ширина области — колво отступов*10px)/колво колонок.

                                                                        В бутстрапе 2 все делается автоматически, а в третьем просто не появляются отступы и я их задаю в css, что очень хахламляет код. Кустомайз не помогает.
                                                                        1. Александр Мальцев # 0
                                                                          В Bootstrap 3 между адаптивными блоками (col-*-*) нет никаких отступов, есть только внутренние поля для содержимого слева и справа по 15px.
                                                                          Если бы мне нужно было что-то подобное, то я бы сделал так:
                                                                          <div class="container">
                                                                            <div class="row">
                                                                              <div class="col-lg-6">
                                                                                <div class="content">...</div>
                                                                              </div>
                                                                              <div class="col-lg-6">
                                                                                <div class="content">...</div>
                                                                              </div>
                                                                              <div class="col-lg-4">
                                                                                <div class="content">...</div>
                                                                              </div>
                                                                              <div class="col-lg-4">
                                                                                <div class="content">...</div>
                                                                              </div>
                                                                              <div class="col-lg-4">
                                                                                <div class="content">...</div>
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          
                                                                          В CSS написал бы следующее правило:
                                                                          .content {
                                                                            margin-left: -10px;
                                                                            margin-right: -10px;
                                                                          }
                                                                          
                                                                          Т.е. внутри адаптивных блоков создал бы дополнительный блок с классом content и с помощью него управлял бы полями адаптивных блоков. Т.е. если необходимо между блоками иметь расстояние 10px, то положительные отступы адаптивных блоков (15px) компенсировал бы своими отрицательными (например, -10px).
                                                                        2. Sayck # 0
                                                                          Ребята, подскажите пожалуйста.
                                                                          Вот допустим в шапке у меня 2 блока
                                                                          <div class="col-lg-3"></div>
                                                                          <div class="col-lg-9"></div>
                                                                          
                                                                          Мне требуется чтоб второй блок не отображался на мобильных устройствах. Т.е. на мобильных устройствах должен быть только первый блок. Подскажите, есть ли такая возможность и если есть, то как это реализовать.
                                                                          1. Александр Мальцев # +1
                                                                            Добавить класс hidden-xs ко второму блоку.
                                                                            <div class="col-lg-3"></div>
                                                                            <div class="col-lg-9 hidden-xs"></div>
                                                                            
                                                                            1. Sayck # 0
                                                                              Огромное спасибо, помогло.
                                                                          2. Иван # 0
                                                                            Здравствуйте!
                                                                            Есть ряд, в нем 8 PNG-изображений 100х100px.
                                                                            Никак не получается выровнять все их по горизонтали по всей ширине ROW

                                                                            
                                                                            <div class="container">                    
                                                                            <div class="row">                
                                                                            <div class="col-lg-1"><img src='img/round/01.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/02.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/03.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/04.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/05.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/06.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/07.png' class='img-responsive' alt='00'></div>
                                                                            <div class="col-lg-1"><img src='img/round/08.png' class='img-responsive' alt='00'></div>	   
                                                                            </div>            
                                                                            </div>
                                                                            
                                                                            
                                                                            
                                                                            1. Александр Мальцев # 0
                                                                              Можно сделать так. Добавить к блоку с классом row ещё один класс (например, col-8). Это необходимо для того, чтобы стили CSS, которым мы длобавим, не применялись ко всем другим элементам.
                                                                              ...
                                                                              <div class="row col-8">
                                                                              ...      
                                                                              
                                                                              Добавить на страницу CSS стили:
                                                                              @media (min-width: 1200px) {
                                                                                .col-8 .col-lg-1 {
                                                                                  width: 12.5%;
                                                                                }
                                                                              }
                                                                              
                                                                            2. Иван # 0
                                                                              Для чего применяется минимальная ширина 1200 px?
                                                                              1. Александр Мальцев # 0
                                                                                Для того чтобы точно применилось только для браузера с шириной рабочей областью больше 1200px. Если это не нужно, то используй так:
                                                                                .col-8 .col-lg-1 {
                                                                                  width: 12.5%;
                                                                                }
                                                                                
                                                                                1. Иван # 0
                                                                                  Не подскажите — почему стандартными инструментами Bootstrap у меня не получалось это сделать?
                                                                                  1. Александр Мальцев # 0
                                                                                    Потому что по умолчанию в Bootstrap 12 колонок. А 12 на 8 нацело не делится. А Bootstrap в качестве ширины колонок позволяет устанавливать только целые значения.

                                                                                    Ещё один вариант, это собрать свою сборку Bootstrap на странице getbootstrap.com/customize/
                                                                                    В этом случае вы сможете указать необходимое количество колонок с помощью параметра @grid-columns. Например: 16 или 24. В этом случае число колонок для создание сетки из 8 равных колонок можно будет легко получить, так как число 16 и 24 нацело делиться на 8. Т.е. если вы выберите вариант с 16 колонками, то один блок будет равен 2 колонкам (16:8=2) — col-lg-2.
                                                                              2. Иван # 0
                                                                                Подскажите, пожалуйста, с помощью Bootstrap возможно ли сваять такую конструкцию?

                                                                                1. Александр Мальцев # 0
                                                                                  Будет так:
                                                                                  <div class="container-fluid">
                                                                                    <div class="row">
                                                                                      <div class="col-xs-4">
                                                                                        <div>1 блок</div>
                                                                                        <div>2 блок</div>
                                                                                        <div>3 блок</div>
                                                                                      </div>
                                                                                      <div class="col-xs-4">
                                                                                        4 блок
                                                                                      </div>
                                                                                      <div class="col-xs-4">
                                                                                        <div>5 блок</div>
                                                                                        <div>6 блок</div>
                                                                                        <div>7 блок</div>          
                                                                                      </div>
                                                                                    </div>
                                                                                  </div>
                                                                                  
                                                                                  Т.е. сначала создаём 3 блока. А потом необходимые блоки (в данном случае левый и правый) ещё разбиваем по 3.
                                                                                  1. Иван # 0
                                                                                    Не поплывут они?
                                                                                    1. Александр Мальцев # 0
                                                                                      В данном варианте нет. Проверяйте…
                                                                                      Если в будущем сетку будете адаптировать под другие устройства, то надо будет смотреть и где надо добавлять пустой блок div с классом clearfix.
                                                                                      1. dotcom # 0
                                                                                        Добрый день. Ответь пожалуйста, как мне зафиксировать class для всех разрешений т.е чтобы если разрешение менялось на sm, мой класс не отсоединялся и не плавал по экрану где ему захочется. Просто зафиксировать его для всех экранов. На lg все стоит хорошо только меняешь разреш. один класс улетает а все стоят… помогите пожалуйста!
                                                                                        1. Александр Мальцев # 0
                                                                                          Не совсем понял вопроса. Если вам нужен фиксированный блок, т.е. чтобы он всегда оставался в одном месте и не изменялся при прокрутке, то для него необходимо установить position:fixed. А с помощью определённых свойств top, left, right, bottom, width и height указать его расположение.
                                                                                          Например, чтобы он всегда распологался внизу экрана:
                                                                                          CSS:
                                                                                          .mydiv {
                                                                                            position: fixed;
                                                                                            left: 0px;
                                                                                            right: 0px;
                                                                                            bottom: 0px;
                                                                                            height: 100px;
                                                                                          }
                                                                                          
                                                                                          HTML:
                                                                                          <div class="mydiv" style="background-color: red;"></div>
                                                                                          
                                                                                          1. dotcom # 0
                                                                                            Нет, не так поняли.
                                                                                            На sm все смещается, так как его зафиксировать так же, как и на lg
                                                                                            чтобы стоял не двигался.

                                                                                            На xs вообще улетает
                                                                                            Позиционировал блоки при помощи margin.
                                                                                2. dotcom # 0
                                                                                  На lg все норм ничего не смещается
                                                                                  1. Александр Мальцев # 0
                                                                                    Тут желательно привести код. Если он большой, то на jsfiddle.net. Скорее всего вы что-то напутали.
                                                                                    Если вам необходимо сделать такие небольшие квадратики, то может быть лучше использовать абсолютное позиционирование.
                                                                                  2. dotcom # 0
                                                                                    Квадратики — это два класса time и views.
                                                                                    <div class="row">
                                                                                      <?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?> 
                                                                                      <div class="col-xs-12  col-md-6 col-lg-3">
                                                                                        <div class="thumbnail"> 
                                                                                          <a href="<?php the_permalink() ?>"><img src="http://placehold.it/400x240" alt=""</a>
                                                                                          <div class="the_views"><i class="fa fa-eye"> 312</i></div>
                                                                                          <div class="the_time"><i class="fa fa-clock-o"> 21:25</i></div>
                                                                                          <div class="caption">
                                                                                    	<h3 class="vids"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                                                                                          </div>
                                                                                        </div>
                                                                                      </div>
                                                                                      <?php endwhile; ?>
                                                                                      <?php endif; ?>
                                                                                    </div>
                                                                                    
                                                                                    1. Александр Мальцев # 0
                                                                                      Margin использовать не надо. Элемент img у вас не закрыт (>).
                                                                                      Можно использовать абсолютное позиционирование. Для этого ваши квадратики необходимо обернуть в div и установить ему относительное позиционирование (position:relative). А самим квадратикам задать абсолютное позиционирование.
                                                                                      Например, так (необходимые стили указал в атрибуте style):
                                                                                      <div style="position:relative; height: 25px;">
                                                                                        <div class="the_views" style="position:absolute; right:0; top:0;"><i class="fa fa-eye"> 312</i></div>
                                                                                        <div class="the_time" style="position:absolute; left:0; top:0;"><i class="fa fa-clock-o"> 21:25</i></div>
                                                                                      </div>
                                                                                      
                                                                                      1. dotcom # 0
                                                                                        Спасибо, но я прочтал ваши записи и попробовал сделать так
                                                                                        @media (min-width:992px) and (max-width:1199px) {
                                                                                        .the_time {
                                                                                        margin-right: 366px;
                                                                                        margin-bottom: 40px;}
                                                                                        }
                                                                                        И все работает, но когда я делаю все это на (max-width:767px) т.е на xs оно не применяется, плавает… не понимаю почему
                                                                                        1. Александр Мальцев # 0
                                                                                          Зачем вы делаете эти вычисления. На устройствах xs у вас не получится это вычислить, т.к. ширина блока (даже если вы используете .container) будет резиновой. Т.е. ширина блока будет зависеть от ширины устройства. То, что вы хотите сделать можно будет только с помощью JavaScript. Что не очень хорошо…
                                                                                          Можно сделать также на плавающих блоках float:
                                                                                          <div style="position:relative; height: 25px;">
                                                                                            <div class="the_views pull-right"><i class="fa fa-eye"> 312</i></div>
                                                                                            <div class="the_time pull-left"><i class="fa fa-clock-o"> 21:25</i></div>
                                                                                          </div>
                                                                                          
                                                                                          1. dotcom # 0
                                                                                            понял, спасибо большое
                                                                                            1. dotcom # 0
                                                                                              Блин все равно слетает на xs, и по вашим примерам пробовал и по своим, а на всех других держится
                                                                                              1. Александр Мальцев # 0
                                                                                                Значит, у вас на данные элементы действуют ещё какие-то другие стили. Проверяйте… Наиболее просто это сделать, это открыть консоль браузера и перейти на вкладку «Инспектирования элементов» (Element). Далее находите необходимые элементы и во вкладке Styles проверяйте, какие на данные элементы действуют стили. С помощью данной вкладки очень просто найти ошибки (тем более что их сразу можно отключить с помощью чекбокса и проверить результат на лету).
                                                                                                1. dotcom # 0
                                                                                                  Хорошо, это понятно, но почему он работает на всех ( md lg sm ) кроме xs
                                                                                                  думаете все таки из-за стилей?
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Скорее всего. Ваше пример на jsfiddle.net/itchief/7sog10ve/
                                                                                                    1. dotcom # 0
                                                                                                      но теперь проблема в том как это все установить так как надо без margin как я делал
                                                                                                      1. dotcom # 0
                                                                                                        да мое
                                                                                                        1. dotcom # 0
                                                                                                          я так посидел подобавлял стили и у меня получаетя так, что для одного экрана надо писать одни значения для другого другие, какие-то стили убирать какие-то добавлять…
                                                                                                      2. dotcom # 0
                                                                                                        да, вы были правы, стиль лишний… спасибо, а именно: right: 0
                                                                                            2. Иван # 0
                                                                                              Здравствуйте! Подскажите, пожалуйста, требуется разместить на экране компьютера блоки как изображено на первой картинке, а на экране мобильного телефона надо чтобы они выстраивались под центральным блоком как на второй картинке.



                                                                                              1. Александр Мальцев # 0
                                                                                                Для этого разработку макета необходимо начинать с мобильных устройств (подход mobile first). Т.е. начинать делать так, как он будет выглядеть на очень маленьких экранах (смартфонах).
                                                                                                <div class="container">
                                                                                                  <div class="row">
                                                                                                    <div id="middle-block">Средний блок</div>
                                                                                                    <div id="left-block">Левый блок</div>
                                                                                                    <div id="right-block">Правый блок</div>
                                                                                                  </div>
                                                                                                </div>
                                                                                                
                                                                                                После этого переходить к проектированию макета для устройств, имеющих более большой экран и т.д.

                                                                                                Для того чтобы вам на средних и больших устройствах сдвинуть существующие блоки необходимо использовать классы Bootstrap push и pull. Т.е. средний блок (left-block) вам необходимо сдвинуть влево на 4 блока (pull), чтобы он стал левым. А левый блок (middle-block) сдвинуть на 4 блока вправо (push), чтобы он стал средним. Т.е. другими словами, поменять их местами.
                                                                                                <div class="container">
                                                                                                  <div class="row">
                                                                                                    <div id="middle-block" class="col-md-4 col-md-push-4" style="height: 100px; background: yellow;">Средний блок</div>
                                                                                                	<div id="left-block" class="col-md-4 col-md-pull-4" style="height: 200px; background: red;">Левый блок</div>
                                                                                                	<div id="right-block" class="col-md-4" style="height: 150px; background: green;">Правый блок</div>
                                                                                                  </div>
                                                                                                </div>
                                                                                                
                                                                                              2. Иван # 0
                                                                                                Ещё вопросик кратенький созрел. Проверяя адаптивность некоторых чужих сайтов уменьшением окна браузера заметил, что некоторые не позволяют себя «складывать» менее, чем, например, 400 px. Почему такое бывает и как это достигается?
                                                                                                1. Александр Мальцев # 0
                                                                                                  Не знаю для чего это нужно. Более логично было бы установить 320px, т.к. это стандартная CSS ширина большинства смартфонов.
                                                                                                  Чтобы это осуществить необходимо добавить в CSS:
                                                                                                  body {
                                                                                                    min-width:400px;
                                                                                                  }
                                                                                                  
                                                                                                2. Александр # 0
                                                                                                  Александр, приветствую.

                                                                                                  Есть вопрос по разметке.

                                                                                                  Не понятно откуда появляется горизонтальная прокрутка в браузере при всех разрешениях, буквально на десяток пикселей, наверное… (в том числе и на мобильных устройствах)
                                                                                                  Примерно как вот здесь.
                                                                                                  Если смотреть по каждому блоку, например в Chrome, по правой кнопке мышки/Посмотреть код, То нет на странице ни одного блока, выходящего за правую границу.

                                                                                                  Может быть сталкивались с таким уже и знаете, как вылечить?
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Здравствуйте. Это происходит обычно из-за ошибки в стилях CSS. В приведённом примере это происходит, потому что классу fav-overlay был назначен правый отрицательный отступ margin.
                                                                                                    .fav-overlay {
                                                                                                      background-color: rgba(17, 17, 17, 0.67);
                                                                                                      margin-right: -20px; /* <- это из-за него */
                                                                                                      margin-left: -20px;
                                                                                                    }
                                                                                                    
                                                                                                    А этот класс назначается элементу div, который расположен в другом элементе div с классом fav-container. Данный элемент занимает 100% ширину viewport браузера и не имеет padding. Следовательно, div с классом fav-overlay, который расположен в нём, увеличивает его ширину на 20px. В результате чего и появляется горизонтальная прокрутка.
                                                                                                    1. Александр # 0
                                                                                                      Благодарю.

                                                                                                      У меня причина была другая, — был один не закрытый div, закрыл, теперь все хорошо на всех типах устройств, кроме телефонов. Буду искать дальше.

                                                                                                  Вы должны авторизоваться, чтобы оставлять комментарии.