boostrap и wordpress - 3 колонки одинаковой высоты

Question

Я использую бутстрап, чтобы немного подстроить свой сайт для WordPress. У меня есть код, содержащий контейнер div, строку и внутри 3 столбцов, когда каждый столбец получает данные из wordpress (или db, если на то пошло), а высота каждого столбца - это высота его содержимого.

То, что я хочу, это столбец 3 с одинаковой высотой, основанный на самом высоком столбце. Я попробовал добавить display: table; в контейнер, отображение: table-row; к строке и отображению: table-cell; для каждого столбца, но он все еще не работает.

Мой код:

<div class="container-fluid" id="page-body"> 
    <div class="row pull-right"> 
     <div class="col-sm-7 pull-right page-content-wrapper"> 
      <div class="page-content"> 
       <?php echo the_content(); ?> 
      </div> 
     </div> 
     <div class="col-sm-3 pull-right page-products-wrapper"> 
      <div class=""> 
       test 
      </div> 
     </div> 
     <div class="col-sm-2 pull-right side-menu-wrapper"> 
      test 2 
     </div>  
    </div> 
</div> 

и CSS у меня есть:

#page-body{ 
    display: table; 
    width: 100%; 
    margin-top: 40px; 
    direction: rtl; 
    padding-right: 9.5%; 
    padding-left: 9.5%; 
} 

#page-body .row{ 
    width:100%; 
    display: table-row; 
} 

.page-content-wrapper, .page-products-wrapper, .side-menu-wrapper{ 
    display: table-cell; 
} 

.page-content-wrapper{ 
    border-right: 1px solid #BE1621; 
    border-left: 1px solid #BE1621; 
    padding-left: 5px !important; 
    padding-right: 5px !important; 
} 

.page-content{ 
    background: #dadada; /* Old browsers */ 
    background: -moz-linear-gradient(left, #dadada 0%, #ffffff 50%, #dadada 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(left, #dadada 0%,#ffffff 50%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to right, #dadada 0%,#ffffff 50%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dadada', endColorstr='#dadada',GradientType=1); /* IE6-9 */ 
    padding: 25px 10px 25px 10px; 
    font-size: 22px; 
} 

.page-products-wrapper{ 
    border-left: 1px solid #BE1621; 
    padding-left: 5px !important; 
    padding-right: 5px !important; 
} 

Я не вижу здесь ничего, что должно сделать это не работает, но по какой-то причине он не будет ... Любые помощь будет оценена.

Заранее спасибо, Gabi.

Answer 1

Этого можно достичь с помощью flexbox. Сначала удалите свойства таблицы вы добавили, а затем просто добавить эту строку в классе строки:

.row { 
    display: flex; 
} 

Если вы хотите, чтобы пойти с таблицами вместо этого, добавьте это:

.row { 
    display: table; 
} 
[class~="col-"] { 
    display: table-cell; 
} 

I настоятельно рекомендую вам использовать flexbox, но зависит от того, какую поддержку браузера вы ищете.

Answer 2

Модифицировать бутстрап, используя действующие методы, предоставленные до настоящего времени, является рискованным бизнесом, если вы не уверены в том, что медиа-запросы применяются к этим стилям только при желаемых размерах экрана. В этом случае, чтобы применить высоту рядный, равную самой высокой колонки я хотел бы использовать JavaScript - применить класс jsEqualHeight к каждому col- со следующими JS: (Обратите внимание на медиа-запрос)

if (jQuery) { 
 
    (function ($) { 
 
     "use strict"; 
 
     $(document).ready(function() { 
 

 
      $(window).on('resize', function() { 
 
       equalHeights(); 
 
      }); 
 

 
      equalHeights(); 
 

 
      function equalHeights() { 
 
       if (window.matchMedia("(min-width: 992px)").matches) { 
 

 
        var elementHeights = $('.jsEqualHeight').map(function() { 
 
         return $(this).height(); 
 
        }).get(); 
 

 
        // Math.max takes a variable number of arguments 
 
        // 'apply' is equivalent to passing each height as an argument 
 
        var maxHeight = Math.max.apply(null, elementHeights); 
 

 
        // Set each height to the max height 
 
        $('.jsEqualHeight').height(maxHeight); 
 
       } else { 
 
        $('.jsEqualHeight').css({ "height": "auto" }); 
 
       } 
 
      } 
 
     }); 
 
    }(jQuery)); 
 
}