Создание вертикального разделителя в Bootstrap: span6 класс

Быстрый ответ

Вертикальный разделитель в Bootstrap можно добавить, применив к левой колонке класс border-right, а к правой – border-left. Всё заключается в простоте:

<div class="row">
  <div class="col border-right">
    <!-- Содержимое для вашей левой колонки -->
  </div>
  <div class="col">
    <!-- Содержимое для вашей правой колонки -->
  </div>
</div>

Граница справа от первого элемента с классом .col сформирует вертикальную линию. Ничего сложного.

Учет адаптивной верстки

Bootstrap – это система сеток, высокоадаптивная, словно мультицветность бликов на новогоднем шаре. Однако иногда этого недостаточно. Для учёта переходов на различные размеры экранов, используйте такие базовые классы, как .col-md-6, для создания адаптивных границ, активирующихся на заданных брейк-поинтах.

Попробуйте следующий CSS-код, который будет работать после md-брейкпоинта Bootstrap:

@media (min-width: 768px) {
  .border-md-right {
    border-right: 1px solid #dee2e6; /* Волшебное действие стиля */
  }
}

Не забывайте проверять, как ваш разделитель выглядит на разных экранах, чтобы убедиться в его совершенстве.

Искусство создания пользовательских разделителей

Единообразие границ — ключ к успеху

Нужно стремиться к тому, чтобы границы были однородными для всех колонок. Используйте следующий трюк: задайте стили для первой и последней колонки с помощью CSS-псевдоклассов :first-child и :last-child, чтобы предотвратить наложение двух границ.

Подробнее об этом расскажет наш спикер на видео

Высота разделителя: гимнастика исполнения

Чтобы разделитель достиг вверху независимо от объема контента в колонках, используйте технику с отрицательными отступами. Но будьте внимательны: с CSS flexbox и встроенными отступами и границами Bootstrap нужно быть на "ты".

.row-equal-height {
  display: flex;
}
.col {
  margin-bottom: -99999px;  /* Если это работает, то это не баг, это фича! */
  padding-bottom: 99999px;
}

Добавьте класс .row-equal-height к вашему .row и наблюдайте, как колонки и разделитель гармонично тянутся до одинаковой высоты.

Кастомизация стилей разделителя

Выбор стиля границы

Экспериментируйте с различными стилями границ, т.е. solid, dotted, dashed или groove чтобы добиться желаемого внешнего вида, соответствующего стилю Bootstrap.

Визуализация CSS-логики

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

Визуализация

Ваш разделитель будет выглядеть визуально следующим образом:

Колонка A | Разделитель | Колонка B

А следующий CSS код будет отражать это свойство:

.divider-vertical {
    border-left: 2px solid #000; /* Это не дроиды, которых вы ищете */
    height: auto;
}

Следующий код реализует эту визуализацию:

<div class="row">
  <div class="col">Колонка A</div>
  <div class="divider-vertical"></div> 
  <div class="col">Колонка B</div>
</div>

Перед вами — чётко обозначенный разделитель между колонками.

Сохранение гармонии с динамическим контентом

Баланс с динамическим контентом

Если ваши колонки наполнены динамическим содержимым, убедитесь, что разделитель адекватно реагирует на изменения и не выделяется исключительно сильно. Особое внимание обратите на обработчики событий, влияющие на изменение высоты колонки.

Как Bootstrap может помочь или помешать

Если разделитель начинает вести себя странно, перепроверьте дополнительные классы, применённые к колонкам. Инструменты Bootstrap могут иногда конфликтовать с вашими настройками отступов и полей.

Больше внимания на больших экранах

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

SCSS для опытных

Для создания более управляемых стилей используйте SCSS. Миксины и расширения классов Bootstrap помогут вам создать гибкие и легко настраиваемые утилиты:

@mixin make-divider($position: right, $breakpoint: md) {
  @include media-breakpoint-up($breakpoint) {
    border-#{$position}: 1px solid $divider-color; /* Домашняя магия Bootstrap! */
  }
}

.col-divider {
  @include make-divider(right, lg);
}

Полезные материалы

1. Система сетки · Bootstrap — документация по сетке Bootstrap.
2. Полное руководство по Flexbox | CSS-Tricks — подробное руководство по Flexbox.
3. border – CSS: Каскадные таблицы стилей | MDN — основы использования CSS границ для создания вертикальных разделителей.
4. Как создать разделители с помощью CSS — руководство по созданию разделителей на CSS.
5. ::before / ::after | CSS-Tricks — объяснение псевдоэлементов ::before и ::after.
6. Before and After псевдоэлементы объяснены – часть первая: как они работают – YouTube — видео о псевдоэлементах CSS.