Различная высота столбца в Bootstrap | Кэрол Скелли | WDstack
Примерно раз в неделю в Stack Overflow я вижу вопрос ровно тот же . Это , всегда имеет один и тот же ответ, но вопрос задается по-разному…
— «Почему новая строка сетки Bootstrap выглядит некрасиво ?»
— «Почему в сетке моего изображения пробела ?»
— «Почему столбцы Bootstrap переносятся неравномерно ?
— «Как я могу выровнять изображения разной высоты?»
— «Как уменьшить пробел между строками сетки?»
— «Почему столбцы сетки Bootstrap не переносятся равномерно?»
— «Что вызывает у меня проблемы с разметкой сетки ?»
— «Как мне сложить столбца разной высоты?»
__” Нерегулярное обтекание колонок начальной загрузки”
Картинки всегда помогают, так что вот наглядное изображение. Обратите внимание, что столбцы, начиная с 4-го столбца, не переносите равномерно на следующую строку…
В идеале 4-й столбец должен располагаться под 1-м.Часто, когда люди сталкиваются с этой проблемой, у них есть теория относительно ее причины.
Проблема НЕ вызвана:
— номером столбцов.
— Тип содержимого внутри столбцов: Изображения, текст, или оба .
— Ширина столбцов.
— Наличие более 12 столбцов в одном файле . ряд
элемент*.
Проблема вызвана одной вещью:
— Содержимое внутри колонок. Высота контента делает каждый столбец разной высотой .
Различное содержимое Высота действительно вызывает проблему0003 «проблема с высотой» .Что действительно вызывает проблему высоты?
Проблема высоты Bootstrap возникает из-за того, что столбцы ( col-*-*
) используют float:left
. Когда столбец «плавающий», он выбивается из обычного потока документа. Он сдвигается влево или вправо, пока не коснется края содержащего его прямоугольника. Таким образом, когда у вас неравномерная высота столбцов, правильное поведение состоит в том, чтобы складывать их к ближайшей стороне.
Прежде чем рассматривать решения, я хочу дополнительно уточнить проблему высоты .
Следующие решения и обходные пути предназначены для настоящих адаптивных макетов , в которых используется перенос столбцов Bootstrap __ это важный компонент адаптивного дизайна с Bootstrap и большинства адаптивных систем сетки.
Некоторые дизайнеры думают, что вы должны ограничить каждый . row
12 столбцами, и не понимают перенос столбца . К сожалению, я даже видел это плохое руководство в учебнике W3Schools Bootstrap.
Это руководство вводит в заблуждение:
«Обратите внимание, что числа в
.col-*-*
всегда должны в сумме давать 12 для каждой строки». — W3schools.com
Пожалуйста, , если вы думаете, что «в каждой строке может быть только 12 столбцов», или если вы не понимаете, почему в .row
, может быть больше 12 столбцов. не читай дальше и читать вместо !
В большинстве случаев высота содержимого равна unknown , но есть несколько способов сделать каждый столбец такой же высоты, как и соседние столбцы… — Сделайте столбцы той же высоты, что и самый высокий столбец .
В этом сценарии каждая строка столбцов будет иметь высоту самый высокий столбец в строке. Это широко используемое решение проблемы высоты . Есть несколько вариантов сделать столбцы той же высоты, что и самый высокий столбец .
Важно! Люди часто предлагают использовать такие трюки, как table-cell или огромные отрицательные поля и заполнение , чтобы сделать столбцы одинаковой высоты. Когда дело доходит до адаптивного дизайна, это плохие идеи. Если вы не понимаете, почему эти нежизнеспособны «равной высоты» решения , или перенос столбцов дальше не читайте, а читайте это.
По состоянию на 2017 год, CSS3 flexbox является лучшим вариантом равной высоты только для CSS , чтобы сделать столбцы одинаковой высоты.
.row.display-flex {
display: flex;
flex-wrap: обертка;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: столбец;
}
Перед флексбоксом…
Различная высота приводит к неравномерному обтеканию столбцовПроблема с высотой решена с помощью flexbox одинаковой высоты…
Использовать flexbox для создания столбцов одинаковой высоты , чтобы быть равными по высоте:Помимо создания столбцов одинаковой высоты с помощью flexbox, другой вариант — сделать содержимое столбца равным одинаковой высоты. Однако это вариант только для около вариантов использования.
Рассмотрим сетку «карточек» с текстовым заголовком и изображением в каждой. Изображения имеют одинаковую известную высоту, но иногда заголовки длиннее и, следовательно, заворачиваются. Классическая проблема высоты из-за float:left
становится очевидной…
В этом случае простым решением может быть принудительное размещение заголовков в одну строку и предотвращение переноса текста:
.panel-body h3 {
overflow : скрытый;
пробел: nowrap;
переполнение текста: многоточие;
}
Проблема с высотой решена (длинные заголовки усечены многоточием)…
Опять же, это небольшой трюк, который обычно не работает в сценариях с динамическим контентом, но его полезно знать.
Одинаковая высота Вариант 3 —
— Установить статическую высоту столбца:
Наконец, самое очевидное из решений CSS «одинаковой высоты». Я упоминаю об этом в последнюю очередь, потому что высота наших столбцов обычно неизвестна. Но это все равно самый простой вариант…
.row.force-height>div {
высота: 500 пикселей;
}
Одинаковая высота Вариант 4 —
— Плагины JavaScript или jQuery:
Основное внимание в этой статье уделяется CSS, но есть несколько вариантов JavaScript для создания блоков div одинаковой высоты. Одним из наиболее популярных вариантов является плагин match-heights.
Другим решением проблемы высоты является использование «clearfix» , которое фактически удаляет плавающие элементы из крайнего правого столбца, чтобы следующий соседний столбец мог корректно переноситься в крайнее левое положение следующей строки.
Bootstrap 3 Clearifx Clearfix Вариант 1 —
— Адаптивный «сброс» DIV в HTML-разметке:
официальный рекомендуемый Bootstrap подход к решению проблемы высоты известен как «сброс ». Преимущество этого варианта clearfix заключается в том, что он отзывчивый, и все, что вам нужно, уже включено в Bootstrap.
Как объясняется в документации, вы просто добавляете div .clearfix
для необходимых окон просмотра или уровней сетки. Итак, в нашей адаптивная верстка, нам нужен клирфикс каждые 2 столбца на маленьких экранах (xs) и каждые 3 столбца на больших (md и выше) экранах.
<дел> с
1
2
3
4
7
8
9
...
Проблема высоты решена с помощью адаптивного сброса…
Адаптивный сброс Демонстрация:
http://www. codeply.com/go/HmRrGFqrvlЕдинственное, что может вызвать некоторые затруднения при адаптивном сбросе, — это динамически генерируемые столбцы. Итеративный цикл, который генерирует столбцы, должен вставлять соответствующий
clearfix
div после каждого столбца X, что может стать более сложным для нескольких уровней сетки.Clearfix Option 2 —
— Clearfix только для CSS с использованием селекторов n th-child:Это решение аналогично предыдущему, за исключением того, что оно выполняется с использованием CSS n th-child(..) селекторы для конечных (самых правых) столбцов в каждой «строке» окна просмотра.
Поскольку средний (-md-) экран просмотра в Bootstrap применяется к экранам шириной 992 пикселя и выше, мы «очищаем» наши плавающие элементы через каждые 3 столбцов на больших экранах.
@media (min-width:992px){
.row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}Аналогично очищаем числа с плавающей запятой менее 992 пикселей (-xs- и -sm-) каждые 2 столбцов на экранах меньшего размера. Хотя мы не используем
col-sm-6
в разметке предполагается, посколькуcol-xs-6
означает «маленький и вверху», если специально не переопределено для уровня сеткиsm
…@media (min-width:992px){
.row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}@media (max-width:991px){
.row.auto-clear .col-xs -6:nth-child(2n+1){clear:left;}
}Демо Clearfix только для CSS:
http://www.codeply.com/go/3v7Q9kQVR6Как я уже говорил, тип содержимого столбцов не имеет значения, а clearfix будет работать в во всех случаях. Вот пример столбцов clearfix с адаптивными таблицами , которые различаются по высоте.
Любой подход clearfix (HTML или CSS) будет работать, чтобы очистить
float:left
и исправить проблему неравномерного переноса сетки высоты . Однако важно отметить, что clearfix не является «каменным» решением.Важно понимать, что ни «одинаковая высота», ни решение clearfix не превратят столбцы в макет, подобный масонству..
Макет MasonryВ Bootstrap 3.x нет ничего родного, что могло бы создать такой тип макета. По сути, макета Masonry выходят за рамки Bootstrap 3 , но все еще возможно с использованием опций на основе CSS или JavaScript.
Вариант Masonry 1 —
— Использовать столбцы CSS3 :.row.make-columns {
-moz-column-width: 19em;
-webkit-column-width: 19em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}.row.make-columns > div {
display: inline-block;
прокладка: .5rem;
ширина: 100%;
}Masonry с столбцами CSS3 Демонстрация:
http://www.codeply.com/go/qnPaEqNcgEСтолбцы CSS3 будут предлагаться в предстоящем Bootstrap 4. В настоящее время с этим решением столбцы всегда упорядочены по сверху вниз , а затем слева направо. Иногда это является недостатком в случаях использования, когда ожидается нормальный поток слева направо.
Masonry Вариант 2 —
— Используйте «Masonry» или другой аналогичный плагин jQuery :Другой способ создать макет Masonry — использовать очень популярный плагин или один из многих других. Вот пример Bootstrap Masonry для начала.
Таким образом, есть 3 способа решить проблему высоты Bootstrap :
— Столбцы одинаковой высоты
— Clearfix
— «Масонское» решение
Все еще здесь? С бета-версией Bootstrap 4, «проблема с высотой» перестанет быть проблемой, поскольку Bootstrap 4 использует flexbox, и поэтому столбцы в каждой строке будут иметь одинаковую высоту. Хотя, возможно, это внесет альтернативную проблему? https://stackoverflow.com/questions/44710785/bootstrap-4-i-dont-want-columns-to-have-the-same-height/44710904
Пожалуйста, дайте мне знать ваши мысли в комментариях!
html — Bootstrap-framework — col-sm — сетка для маленьких экранов не работает
Задавать вопрос
спросил
Изменено 1 год, 2 месяца назад
Просмотрено 499 раз
Я много чего перепробовал, но не смог найти решение своей проблемы.
Я хочу выровнять 3 разные части определенным образом для всех типов экранов, но col-sm и col-xs из бутстрапа не работают.
Я пробовал это:
<дел> <дел> а<дел> б