Бутстрап, балансирующий столбцы пули

У меня есть неупорядоченный список, который я хочу сбалансировать на странице. Поэтому я применил метод балансировки столбцов Bootstrap, как показано в этом примере. Разумеется, реальные предметы имеют скорее длинный текст.

<div class="row">
  <ul>
    <li class="col-xs-12 col-md-6">item 1</li>
    <li class="col-xs-12 col-md-6">item 2</li>
    <li class="col-xs-12 col-md-6">item 3</li>
    <li class="col-xs-12 col-md-6">item 4</li>
    <li class="col-xs-12 col-md-6">item 5</li>
  </ul>
</div>

Это работало в отношении балансировки столбцов. Но это перепутало настроение, из-за того, что в этом куске загрузочного лота был добавлен слой padding.

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

Я попытался исправить это с помощью собственного CSS:

li.col-xs-1, ... li.col-lg-12 {
  margin-left:1em;
  padding-left:0em;
}

но это помешало колонке.

Эксперименты показали, что виновником является margin-left:1em; с любым изменением разрывов колонны левого края. Я успешно работал над этим, установив вместо этого padding.

<div class="row" style="padding: 0.5em;">

Но если у кого-то есть действительно крепкое сцепление с Bootstrap и как это работает, я хотел бы понять, почему установка левого поля играет варочную панель с балансировкой столбцов.

Ответ 1

Сетка работает с 3 частями: контейнером, строкой и столбцом (-ами)...

Контейнер имеет 15px отступов. Строка отменяет заполнение контейнера с -15px маржи. Столбцы имеют 15px отступов, которые вытаскивают контент из краев контейнера и создают согласованный 30px желобок.

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

Что завинчивается в том, что ширина столбцов рассчитана на проценты. Итак, в вашем примере, в средстве просмотра средней ширины, столбцы установлены на 50%. Когда вы добавляете 1em поля в li.col-md-6, он добавляет, что поверх 50%, что означает, что вы заканчиваете с 100% + 2em в строке и заставляет столбец обертываться.

Имеют смысл?

Я предполагаю, что у вас есть "исправление", но это еще один способ справиться с этим и сохранить визуальные пули и единственный неупорядоченный список (что может быть важно для доступности), и все же сохранить все возможности вложенности, я бы сделал следующее в ваш css вместо:

li.col-lg-12, li.col-md-6 {  
    list-style: none;
    padding-left: 30px;
}
li.col-lg-12:before, li.col-md-6:before {  
    content: "\2022";
    position: absolute;
    left: 15px;
}

Таким образом, вам не нужно добавлять дополнительную разметку в свой дизайн. В основном, это удаление стиля списка, добавление 30px дополнительного дополнения к элементу списка, а затем помещает пулю с псевдокласс :before 15px слева от содержимого внутри столбца, в котором содержимое обычно выравнивается в любом случае.

EDIT: Здесь мой опыт работы с двумя разными подходами.

Это то, что я получил, когда пробовал ваш подход. Обратите внимание на то, как пуля из второго столбца вторгается в текст и заполняется из первого столбца.

Используя мой подход, я смог добиться этого:

Для меня я бы одобрил этот подход, потому что он ведет себя лучше в том смысле, что пули заключены в столбец. Кроме того, на мой взгляд, это кажется менее сложным, потому что это не связано с какой-либо дополнительной разметкой. В вашем случае вы добавили стиль inline, который я всегда избегаю для удобства обслуживания. И, хотя вы можете написать правило в своей таблице стилей, чтобы переопределить поведение класса .row, вы потеряете эту красивую чистую вложенность, описанную выше, когда вы не хотели использовать классы столбцов в элементе списка. Конечно, вы можете добавить еще один класс или идентификатор в свою строку, чтобы обеспечить более конкретную спецификацию, но опять же, для меня это больше разметки, и это не стандартный Bootstrap, поэтому может быть труднее для кого-то еще сохранить позже (или, я люблю тебя, и ты забываешь все свои хаки через неделю, тебе может быть даже тяжелее поддерживать; -).