Bootstrap 3 колонки одинаковой высоты: Как сделать колонки одинаковой высоты в Bootstrap3? — Хабр Q&A

Leave a Comment / Разное / By /

html — Как сделать колонны одинаковой высоты в Bootstrap?

<section>
        <div>
             <div>
                <div>
                    <h3>Специальности</h3>
                </div>
                <div>
                    <h4>Технологии кибербезопасности</h4>
                </div>
                <div>
                    <h4>Информатика</h4>
                </div>
                <div>
                    <h4>Администрирование ИТ-систем</h4>
                </div>
                <div>
                    <h4>Развитие ИТ-систем</h4>
                </div>
                <div>
                    <h4>Разработка аппаратного обеспечения и программирование</h4>
                </div>
                <div>
                    <h4>Информационная технология бизнеса</h4>
                </div>
            </div>
        </div>
    </section>

. speacialities h4 {
  padding: 30px;
  border: 1px solid black;
}
  • html
  • css
  • bootstrap
3

Накидал на скору руку, остальное сами до ума доведете:

.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
  text-align: center;
}
.parent_rows {
  display: flex;
  flex-direction: row;
  height: 100%;
  border: 1px solid red;
}
.rows_children {
  border: 1px solid green;
  width: 33.3%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>dd</title>
</head>
<body>
     <div>
     <div>
     Специальности
     </div>
     <div>
     <div>
     COLUMN1
     </div>
     <div>
     COLUMN2
     </div>
     <div>
     COLUMN3
     </div>
     </div>
     <div>
     <div>
     COLUMN1
     </div>
     <div>
     COLUMN2
     </div>
     <div>
     COLUMN3
     </div>
     </div>
             
    </section>
</body>
</html>

Еще раз кину ссылку на шпаргалку по флексам:

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — Выровнять высоту кнопок в колонках на Bootstrap 4

Задать вопрос

Вопрос задан

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

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

Использую Bootstrap 4. Есть несколько (для примера пусть будет 2) колонок кнопок, количество кнопок в колонках разное, может меняться. Как можно выровнять высоты кнопок так, чтобы колонки были одинаковой высоты?

<div className="btn-group-vertical mt-4 mb-4" role="column">
    <button type="button" className="btn btn-outline-secondary bg-dark">1</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">2</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">3</button>
</div>
<div className="btn-group-vertical mt-4 mb-4" role="column">
    <button type="button" className="btn btn-outline-secondary bg-dark">1</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">2</button>
</div>
  • css
  • bootstrap

Если я правильно понял Вашу задачу относительно одинаковой высоты колонок, то просто добавьте btn-group-container класс d-flex:

<link href="https://cdn. jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
  </div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
  </div>
</div>
2 

.btn-group-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
  </div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
  </div>
</div>
4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

столбцов одинаковой высоты Bootstrap. Почему table-cell или отрицательные поля… | Кэрол Скелли | WDstack

Почему table-cell или отрицательные поля НЕ работают

Опубликовано в

·

6 мин чтения

·

12 марта 2017 г.

Загрузка ремешок — это фреймворк, предназначенный для адаптивного дизайна . Сетка Bootstrap имеет несколько уровней (точки останова, также известные как точки останова), медиа-запросы и изменчивую ширину столбцов по какой-то причине…

Причина в том, что адаптивный дизайн .

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

Даже если вы думаете, что знаете это, все равно прочтите.

 
 
 
 
 
..
 
 
..
 
 
..

Показанный выше очень простой макет 3 столбца . Это выглядит так…

Bootstrap — 3 столбца в ширину, 33% ширины каждый

Как вы, возможно, знаете, сетка Bootstrap состоит из 12 столбцов. Обратите внимание, что мы использовали три единицы столбца col-md-4 , и каждая из них потребляет 4 из 12 единиц 12/3=4 . Все идет нормально.

Далее нам нужна еще одна строка столбцов. явно очевидная разметка…

 
 
 
 
 
..
 
..
 
 
..
 
 
 
 
 
 
..
 
 
..
 
 < div>..
Bootstrap — 2 строки по 3 столбца

Идеально. Можем ли мы сделать это лучше?

Примерно здесь, когда я начинаю терять людей, так что

наберитесь терпения.

Могу ли я сделать это вместо этого? Могу ли я поместить все столбцы в одну строку?

 
 
 
 
 
..
 
 
..
 
 
..
 
 
..
 
 
..
 
 
..

Новичок: Нет , это не сработает. Сетка Bootstrap имеет только 12 столбцов, поэтому никогда не должно иметь более 12 столбцов подряд. У вас должно быть только 3 col-md-4 в каждом элементе .row , потому что 3*4=12.

Учитель: Хорошо, звучит разумно. Но , предположим, мне нужен адаптивный макет . Я хочу 3 столбцов на средних и больших экранах шириной и только 2 столбцов на самых маленьких экранах шириной . Я хочу, чтобы мой макет выглядел следующим образом:

Желаемый маленький макет шириной — 2 столбца поперекЖелаемый большой макет шириной — 2 столбца по

Новичок: Хорошо, давайте подумаем «сначала мобильные» и создадим наименьшую ширину макета из 2 столбцов…

 
 
 
 
 
. .
 
 < div>..
 
 
 
 
 
 
..
 
 
..
 
 
 
 
 
 
 ..
 
 
..

Новичок (продолжение): Затем добавьте ширину столбцов для большого экрана, следя за тем, чтобы каждая .row никогда не превышала 12 столбцов. Как я уже говорил, «вы никогда не должны иметь и более 12 столбцов подряд»…

 
 
 
 
 
..
 
 
..
 
 
 
 
 
 
..
 
 
..
 
 
 
 
 
 
..
 
 
..

Учитель: Хорошо, давайте посмотрим, как это работает.

Во-первых, давайте попробуем это на меньшем экране шириной …

ОК — 2 столбца в поперечнике на экранах меньшей ширины

Хорошо, хорошо. Теперь проверьте больший экран шириной …

Ошибка — только 2 столбца на экранах большей ширины

Учитель: О нет! Это не работает.

Я хочу, чтобы в макете было 3 столбцов на больших экранах. Позвольте мне объяснить , почему не работает. Ранее, когда я спрашивал: «Могу ли я поместить все столбцы в одну строку , вот так…»

 
 
 
 
 
..
 
 
..
 
 
..
 
 
..
 
 
..
 
 
..

Ответ новичка был: « Нет. В сетке только 12 столбцов, поэтому никогда не должны иметь единицы, превышающие 12 в строке».

Именно это заблуждение сделало невозможным получение желаемого макета.

Необходимость переноса столбцов

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

 
 
 
 
 
. .
 
 
..
 
 
..
 
 
..
 
 
..
 
 
..

2 столбца на экранах малой ширины…

OK — 2 столбца на экранах меньшей ширины

3 столбца на экранах большей ширины…

OK — 3 столбца на экранах большей ширины

Итак, теперь вы знаете, что это Допустимо превышение 12 столбцов в одном элементе .row .

Это не только нормально, это часто требуется

для адаптивного дизайна

Этот метод известен как обтекание столбцов , и является одной из самых мощных функций адаптивного дизайна Bootstrap. Желаемый макет был бы невозможен (кроме дублирования разметки), если бы мы попытались придерживаться ошибочного представления о том, что единицы столбца должны составлять до 12 в одной строке . Это также работает лучше, когда у вас есть неизвестное количество столбцов или столбцы создаются динамически.

По делу. Теперь, когда вы знаете о необходимости из обертывания столбцов , давайте вернемся и посмотрим на столбцы одинаковой высоты.

Поскольку мы рассматриваем решения с одинаковой высотой, мы рассмотрим эти 2 макета…

1: Простой макет — один ряд 

 
 
 
 
 
..
 
 
..
 
 
..

2: Адаптивный макет 

 
 
 
 
 
 ..
 
 
..
 
 
..
 
 
..
 
 
..
 
 
 ..

Теперь наши столбцы имеют реальный контент, поэтому они различаются по высоте на . Цель состоит в том, чтобы сделать каждый столбец такой же высоты, как и соседние столбцы. Столбцы одинаковой высоты часто используются для решения проблемы неравномерного переноса, известной как «9».0015 проблема высоты ».

1 — Используйте `table-cell`(худший)

IMO, это , а не решение. Установив для строки значение display:table , а для столбцов — display:table-cell , мы действительно получим ряд столбцов одинаковой высоты.

 .row.display-table { 
 display: table; 
 }.row.display-table [class*=’col-’] { 
 float: none; 
 дисплей: таблица-ячейка; 
 }

Однако, если столбцы содержат блок содержимого (например, карточки), нет простого способа сделать дочерний блок высотой 100% столбца. Кроме того, это решение не отвечает, и не работает для адаптивного макета. Я действительно понятия не имею, почему люди предлагают это как вариант. __ это не так.

Демонстрация ячейки таблицы :
http://www.codeply.com/go/Eoqeg1PDdR

2 — Использовать огромные отрицательные поля и отступы (плохо)

Еще одно распространенное предложение — использовать очень большие отрицательные поля и отступы, например:

 .row.make-equal { 
 overflow: hidden; 
 }. row.make-equal [класс*="кол-"]{ 
 нижняя граница: -99999px; 
 padding-bottom: 99999px; 
 }

Опять же, если столбцы содержат блок содержимого, нет простого способа сделать дочерний блок высотой 100% родительского столбца. Кроме того, это решение не работает для адаптивного макета.

Демонстрация огромных отрицательных полей:
http://www.codeply.com/go/1EtD4QnDzF

3 — Используйте flexbox (лучше всего!)

По состоянию на 2017 год лучший (и самый простой) Способ сделать столбцы одинаковой высоты в адаптивном дизайне — использовать CSS3 flexbox.

 .row.display-flex { 
 display: flex; 
 flex-wrap: обертка; 
 } 
 .row.display-flex > [class*='col-'] { 
 display: flex; 
 flex-direction: столбец; 
 }

Теперь у нас есть столбцы одинаковой высоты, и их содержимое заполняет всю высоту всего столбца.

Демонстрация Flexbox!
http://www. codeply.com/go/EskIjvun4B

Будущая сетка Bootstrap 4 будет использовать flexbox по умолчанию, поэтому столбцы одинаковой высоты теперь изначально поддерживаются __ дополнительный CSS не требуется!

Одинаковая высота для столбцов сетки Bootstrap 3

У меня есть несколько столбцов сетки Bootstrap 3 с разной высотой:

 

  
Элемент 1

  
Элемент 2 
 дополнительная строка
  

  
Элемент 3

  
Элемент 4. Это должно быть на отдельной строке

Это выглядит так:

Я хочу добавить дополнительный класс (например, .row-aligned ) к .row , чтобы все столбцы в ряду имели одинаковую высоту.

Это должно выглядеть так:

Поскольку мне не нужно поддерживать старые браузеры, я могу использовать flexbox. Моя попытка проста и работает во всех браузерах, но не в Safari (версия 9.1, Mac OSX 10.10):

 .aligned-row {
  дисплей: гибкий;
  flex-flow: перенос строк;
}

Я подготовил демо здесь.

Ошибка Safari

Как я уже сказал, Safari не может обрабатывать этот стиль flexbox, и результат выглядит так:

(Я обнаружил, что добавление margin-left: -1px , кажется, решает проблему, но это не очень хорошее решение, потому что оно сдвинет все на 1 пиксель влево, что может скрыть границы или что-то еще.)

У вас есть идеи, как я могу исправить эту ошибку в Safari? Или я неправильно использую flexbox? Или есть лучшее решение без использования flexbox?

  • twitter-bootstrap
  • twitter-bootstrap-3
  • сафари
  • flexbox
3

Решение состоит в том, чтобы «удалить» отображение : таблица , для которой установлено значение .row::before :

 .aligned-row {
    дисплей: гибкий;
    flex-flow: перенос строк;
    &::до {
        дисплей: блок;
    }
}

Demo

Добавьте класс display-flex в строку следующим образом:

А затем добавьте этот код CSS.