Как изменять размеры и расположение столбцов с помощью сетки Bootstrap?

@charles.orn 

Для изменения размеров и расположения столбцов в сетке Bootstrap необходимо использовать классы макета Bootstrap, такие как col-sm, col-md, col-lg и т. д. Эти классы определяют ширину столбца в зависимости от размера экрана.

Например, чтобы создать два столбца с равной шириной на средних экранах, можно использовать следующий код:

1
2
3
4
5
6
7
8

<div class="row">
  <div class="col-md-6">
    <!-- первый столбец -->
  </div>
  <div class="col-md-6">
    <!-- второй столбец -->
  </div>
</div>

Также с помощью классов col-*-offset-* и col-*-push-* можно задавать отступы и сдвиги столбцов относительно друг друга.

1
2
3
4
5
6
7
8

<div class="row">
  <div class="col-md-4 col-md-offset-2">
    <!-- первый столбец с отступом в 2 столбца -->
  </div>
  <div class="col-md-4 col-md-push-2">
    <!-- второй столбец с сдвигом на 2 столбца вправо -->
  </div>
</div>

Также существует возможность использовать классы col-*-pull-* для сдвига столбцов влево.

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