Ответ 1

Вы можете добиться этого, используя javascript. Узнайте самую большую высоту из 4-х дивизий и сделайте все их на той же высоте, что и самая большая.

Вот код:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

Ответ 2

В одном месте был официальный экспериментальный пример столбцов с одинаковой высотой, используя CSS flexbox с Bootstrap. Вот его суть:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

И затем используйте <div class="row row-eq-height"> вместо <div class="row">.

Обратите внимание, что flexbox не поддерживается в IE < 10.

Ответ 3

FYI - я сделал это, чтобы решить мою проблему, чтобы включить отзывчивые точки останова, которые соответствуют точкам останова в бутстрапе. (Я использую LESS-переменные из бутстрапа для синхронизации точек останова, но ниже - скомпилированная версия css)

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

затем добавили классы к родительскому, которые были необходимы.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Ответ 4

ИЗМЕНИТЬ 1: Я должен был помочь кому-то в этом, поэтому я сделал plunkr. Перейдите к "script.js" и прокомментируйте "bootstrap_equalizer();" чтобы увидеть исходный бутстрап, без одинаковых столбцов высоты.

Я знаю, что это немного поздно, но я уверен, что это может улучшить ваш код и помочь другим!:)

Как я привык работать с Foundation 5, когда мне приходится работать с бутстрапом, я пропускаю "эквалайзер".

Я делаю небольшую функцию для вызова страниц, где вам нужно "уравнять" некоторые столбцы. Мой код основан на ответе @paulalexandru!

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

На стороне html вам просто нужно сделать это:

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

столбец 1 и столбец 2 будут иметь одинаковую высоту! Вы можете, конечно, иметь более двух столбцов!

Надеюсь, это поможет! =)

Ответ 5

Вы можете использовать свойства display:table:

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Пример

Обновление

По мере того, как люди, похоже, уменьшают это, поскольку он разбивает бутстрап, вы действительно должны ориентировать элементы с разными классами на то, что использует bootstrap - так вот обновленная скрипка, которая не сломает остальную загрузку - для вышеуказанного кода, если вы добавите в строку еще один класс table-row, вы можете использовать следующие стили:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Пример

Ответ 6

Эксперимент Bootstrap, как упоминается @cvrebert, работает для меня в Microsoft Internet Explorer (версия 11) и Mozilla Firefox (версия 37), но не работает для меня в Google Chrome (версия 42, 64-разрядная версия).

Вдохновленный ответами @cvrebert и @Maxime, я придумал это решение, которое работает для меня в этих трех браузерах. Я решил поделиться им, так что, возможно, другие тоже смогут его использовать.

Предположим, что в вашем HTML есть что-то подобное:

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

Добавьте это в свой JS:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

Он использует jQuery . externalHeight() функцию для вычисления и установки внутренних высот div.

Кроме того, я добавил это в свой CSS, я не уверен, что это помогает, но это, безусловно, не повредит:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Ответ 7

Чтобы иметь одинаковые высоты столбцов и не реагировать на них, вы должны попробовать следующее:

https://github.com/liabru/jquery-match-height

Он использует "JQuery". До сих пор для меня это самое простое решение.

Ответ 8

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

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

Проверьте демонстрацию здесь - https://jsfiddle.net/3Lam7z68/ (измените размер окна вывода, чтобы увидеть изменение размера каждого столбца)

Ответ 9

Для того чтобы все div имели одинаковую высоту, вам нужно определить фиксированную высоту для внутреннего div (div class= "well" ),

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

Вы можете перейти по этой ссылке demo, например.

Ответ 10

Я немного опаздываю в игру, но...

Это приведет к выравниванию высот элементов в строке с классом "соответствие по высоте". Он соответствует ячейкам на основе их верхнего значения, поэтому, если они перемещаются под друг другом, когда страница становится меньше, я не устанавливаю высоту.

Я знаю, что есть несколько версий CSS, но все они нарушают мой дизайн макета.

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})

Ответ 11

Я думаю, что ответ paulalexandru довольно хорош. Я бы добавил только код, чтобы избежать проблем при изменении размера окна. Если div с наибольшей высотой содержит фотографию, у вас могут возникнуть проблемы при изменении ширины изображения, так как она также изменит ее высоту, поэтому в этом случае вам нужно иметь дело с событием resize.

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}

Ответ 12

Если кто-то заинтересован в чистом решении CSS, которое не нарушает отзывчивость, это сработало для меня (обратите внимание, что я добавил класс "row-eq-height", где класс "row" должен прояснить и не вмешиваться с bootstrap css и изменил "md" на "xs", чтобы лучше проверить его в демонстрации).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>              

CSS

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Вы можете проверить демо здесь.

Ответ 13

Чтобы сделать сайт отзывчивым, вы должны указать ширину в% и отобразить 4 div с одинаковой высотой и указать высоту

.col-md-3 {
    width:25%;
    height:250px;
}

.row {
    width:100%;
}

Ответ 14

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

Итак, я добавил вторую функцию, которая будет определять размер окна, reset height для auto, а затем установить высоту в div, если она больше 967. Номер 967 может быть изменен на любой номер, который вы хотите использовать, когда отзывчивость сводит все до одного столбца.

$(window).resize(function () {

        // reset height to auto.
        $(".div-name1").height("auto");  
        $(".div-name1").height("auto");            

        // check if the width is greater than 967 under 967 responsive switches to only 1 column per row
        if ($(window).width() > 967) {
            // resize the height
            myresize1(".row-name1", ".div-name-row1");
            myresize1(".row-name2", ".div-name-row2");
         }

            function myresize1(name1, name2) {
                $(name1).each(function () {
                    var heights = $(this).find(name2).map(function () {
                        console.log($(this).height() + " - ");
                        return $(this).height();
                    }).get(),

                    maxHeight = Math.max.apply(null, heights);
                    console.log(maxHeight + " - ");
                    $(name2).height(maxHeight);
                });
            };            
    });

Ответ 15

Мы можем достичь этого путем

• Используя механизм таблицы
• Использование jquery-match-height js plugin

1. Используя механизм раскладки таблицы

Демо - JS Fiddle

Механизм -

• Оберните все столбцы в один div
• Сделайте этот div как таблицу с фиксированным макетом
• Сделать каждый столбец ячейкой таблицы
• Используйте свойство vertical-align для управления позицией содержимого.

Мы можем создавать столбцы одинаковой высоты и вертикально выровнены с использованием следующих css и классов.

Base css будет

  /* columns of same height styles */

.row-full-height {
  height: 100%;
}

.col-full-height {
  height: 100%;
  vertical-align: middle;
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}


/* vertical alignment styles */

.col-top {
  vertical-align: top;
}

.col-middle {
  vertical-align: middle;
}

.col-bottom {
  vertical-align: bottom;
}

Base html будет

<div class="container">
  <h2>Demo 1</h2>
  <div class="row">
    <div class="row-same-height">
      <div class="col-xs-3 col-sm-height">1st column</div>
      <div class="col-xs-3 col-sm-height col-top">2st column</div>
      <div class="col-xs-3 col-sm-height col-middle">3st column</div>
      <div class="col-xs-3 col-sm-height col-bottom">4th column</div>
    </div>
  </div>
</div>

2. Match Media Js

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

Демо-ссылка - здесь