Bootstrap 3 колонки одинаковой высоты – Как в bootstrap сделать 2 колонки col 6 одинаковой высоты? И как залить одну колонку цветом?

Как я могу сделать колонки Bootstrap одинаковой высоты?

Чтобы ответить на ваш вопрос, это все, что вам нужно, чтобы увидеть полную отзывчивую демонстрацию с префиксом css :

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Изображение 2300

Чтобы добавить поддержку для гибкого содержимого эскиза в столбцах flex, как на скриншоте выше, также добавьте следующее... Обратите внимание, что вы можете сделать это и с панелями:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

Хотя flexbox не работает в IE9 и ниже, вы можете использовать демонстрацию с запасным вариантом, используя условные теги с чем-то вроде сетки javascript в качестве полизаполнения:

<!--[if lte IE 9]>

<![endif]-->

Что касается двух других примеров в принятом ответе... Демонстрация таблицы - неплохая идея, но она реализуется неправильно. Применение CSS к классам столбцов начальной загрузки, без сомнения, полностью нарушит структуру сетки. Вы должны использовать пользовательский селектор для одного и двух стилей таблиц, которые не должны применяться к [class*='col-'] которые имеют определенную ширину. Этот метод следует использовать ТОЛЬКО, если вы хотите столбцы одинаковой высоты и одинаковой ширины. Он не предназначен для любых других макетов и не отзывчив. Однако мы можем сделать это запасным вариантом на мобильных дисплеях...

<div>
<div>
    Content...
</div>
<div>
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

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

Полный код см. В Codepen, который автоматически префиксует код flexbox.

Как я могу сделать колонки Bootstrap одинаковой высоты?

Чтобы ответить на ваш вопрос, это все, что вам нужно, чтобы увидеть полную отзывчивую демонстрацию с префиксом css :

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Изображение 2300

Чтобы добавить поддержку для гибкого содержимого эскиза в столбцах flex, как на скриншоте выше, также добавьте следующее... Обратите внимание, что вы можете сделать это и с панелями:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

Хотя flexbox не работает в IE9 и ниже, вы можете использовать демонстрацию с запасным вариантом, используя условные теги с чем-то вроде сетки javascript в качестве полизаполнения:

<!--[if lte IE 9]>

<![endif]-->

Что касается двух других примеров в принятом ответе... Демонстрация таблицы - неплохая идея, но она реализуется неправильно. Применение CSS к классам столбцов начальной загрузки, без сомнения, полностью нарушит структуру сетки. Вы должны использовать пользовательский селектор для одного и двух стилей таблиц, которые не должны применяться к

[class*='col-'] которые имеют определенную ширину. Этот метод следует использовать ТОЛЬКО, если вы хотите столбцы одинаковой высоты и одинаковой ширины. Он не предназначен для любых других макетов и не отзывчив. Однако мы можем сделать это запасным вариантом на мобильных дисплеях...

<div>
<div>
    Content...
</div>
<div>
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

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

Полный код см. В Codepen, который автоматически префиксует код flexbox.

Как Выровнять высоту колонок в bootstrap? — Хабр Q&A

Есть несколько блоков (для примера 2) в 1 ряд:
<div>
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div
                               >
                                <div>
                                    <h5>Заголовок 1</h5>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div>
                              ТУТ КАРТИНКА
                            </div>

                            <div>
                                <div>
                                    <div>
                                        <p>
                                      1 строка текста
                                      </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div
                               >
                                <div>
                                    <h5>Заголовок 2</h5>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div>
                                ТУТ КАРТИНКА
                            </div>

                            <div>
                                <div>
                                    <div>
                                        <p>
                                      Много строк текста. Много строк текста.Много строк текста.Много строк текста.
                                      </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Проблема в том, что высота блока, зависит от контента, который в нем размещается, например от высоты картинки/количества текста, как сделать так, чтобы высота блоков была такая, как наибольший по высоте блок? Т.е. чтобы все блоки в ряду были одинаковых размеров. Может быть в bootstrap есть спец. решение этой проблемы? Пробовал так: Как Выровнять высоту колонок в bootstrap?, не помогло.

Вот пример:

Колонки bootstrap съезжают вниз при одинаковой размерности. Почему? — Хабр Q&A

Добрый день. Имеется блок на бустрапе следующего вида:
<div> <div> <div> <div> <div> <div> <div> <img src="https://site.com/images/icons/new/fx-pairs.png"> <p>90+ Fx pairs</p> </div> </div> <div> <div> <img src="https://site.com/images/icons/new/fx-pairs.png"> <p>35+ Stocks</p> </div> </div> <div> <div> <img src="https://site.com/images/icons/new/fx-pairs.png"> <p>18+ Metals</p> </div> </div> <div> <div> <img src=src="https://site.com/images/icons/new/fx-pairs.png"> <p>47+ CFDs</p> </div> </div> <div> <div> <img src="https://site.com/images/icons/new/fx-pairs.png"> <p>40+ Indices</p> </div> </div> <div> <div> <img src="https://site.com/images/icons/new/fx-pairs.png"> <p>24+ Crypto</p> </div> </div> </div> </div> </div> </div> </div>

Т.е. колонки все ровные, показываться должно тоже все ровно, каких-то дополнительных оступов у элементов внутри .col нет. НО. Почему-то при определенной ширине экрана, некоторые колонки съезжают на следующую строку, как будто им не хватает места в строке. Для начала продемонстрирую как всё выглядит (почти при любом расширении экрана все ок, но в каких-то диапозонах ширины, колонки съезжают на строку вниз)

Итак, большой экран выглядит так, тут все норм:

Средний экран, тут все норм:

Маленький экран, тут все норм:

Тоже маленький экран, но на такой ширине колонка съезжает:

Подскажите пожалуйста, из за-чего это происходит и как это исправить?

Две колонки одинаковой высоты - Bootstrap - CSS

В настоящее время я создаю коробку продуктов с двумя столбцами рядом друг с другом, оставив один образ продукта и право одного описания продукта.

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

отзывчивым. Я пробовал много решений, но все еще застрял, самый близкий из них использовал медиа-запросы и применял высоту к .product-det но похоже, что это не лучший способ.

Я создал Bootply в качестве демонстрации.

Синяя рамка должна достигать нижней части обертки.

HTML

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <img src="http://placehold.it/250x250">
                        </div>
                        <div>
                            <div>   <a href="#" title=""><h5>Article pokeball superpotion lighting boltubertext pokemon pikachu</h5></a>

                                <div
                               >  <span>
                                                    <i></i>
                                                </span>

                            </div>
                            <div>
                                <div>
                                    <div>ITEMID</div>
                                    <div>
                                        <div>
                                            <input placeholder="qnt" type="text">  <span>
                                                        <button type="button">
                                                        <span></span>

                                            </button>
                                            </span>
                                        </div>
                                    </div>
                                    <div><span>3.203 €</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div>Right content</div>
</div>

CSS

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.padding-15 {
  padding: 15px;
}
.padding-t-15 {
  padding-top: 15px;
}
.margin-b-15 {
  margin-bottom: 15px;
}
.border-default{
  border: 1px solid #e0e0e0;
}
.padding-t-0 {
  padding-top: 0px;
}
.padding-b-0 {
  padding-bottom: 0px;
}
.nopadding {
  padding: 0;
}
.line-h-35 {
  line-height: 35px;
}
.border-l-default {
  border-left: 1px solid blue;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *