Различная высота столбца в 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 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 499 раз

Я много чего перепробовал, но не смог найти решение своей проблемы.

Я хочу выровнять 3 разные части определенным образом для всех типов экранов, но col-sm и col-xs из бутстрапа не работают.

Я пробовал это:

 

    <дел>
        <дел>
            а
        
        <дел>
            б