Bootstrap: равная высота вложенных col-md- * элементов

Я не нашел никакого рабочего решения для своей проблемы, поэтому я действительно надеюсь, что вы можете мне помочь.Bootstrap: равная высота вложенных col-md- * элементов

Адрес: jsfiddle.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<!-- snippet 1 --> 
 
<div class="col-md-12 col-sm-12"> 
 
    <div class="col-md-6 col-sm-6" style="padding:0;"> 
 
     <div class="well" style="border-right:1px solid black;"> 
 
      Test 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6" style="padding:0;"> 
 
     <div class="well"> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
<!-- snippet 2 --> 
 
<div class="col-md-12 col-sm-12"> 
 
    <div class="col-md-9 col-sm-9" style="padding:0;"> 
 
     <div class="well" style="border-right:1px solid black;"> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;"> 
 
     <div class="well"> 
 
      Test 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;"> 
 
     <div class="well"> 
 
      Test 
 
     </div> 
 
    </div> 
 
</div>

В сниппета 1 Мне нужно несколько вложенных элементов, чтобы иметь одинаковую высоту на основе наибольшего элемента. Во втором фрагменте это похоже. Два элемента с правой стороны должны иметь ту же высоту, что и элемент слева.

Как можно решить эту проблему без потери ответственности?

Спасибо за ваше время и помощь!

источник

2014-11-22 sleepless

Bootstrap не поможет вам с высотой. Возможный дубликат: http://stackoverflow.com/questions/9787999/making-two-side-by-side-divs-heights-equal –

Действительно, это не помогает мне. Вот почему я пытаюсь найти другое решение. Пример в вашей ссылке выглядит интересным. Я попробую. – sleepless

Bootstrap - это CSS и js. Вы можете использовать множество решений, jQuery MatchHeight, display: table/table-cell, padding-bottom и т. Д., Этот вопрос возникает часто, выглядит сложнее – Christina

Столбцы с равными высотами являются известной проблемой в модели CSS, и Bootstrap может сделать очень мало, чтобы помочь вам.

Лучшее, что вы можете сделать, это прочитать большое количество литературы (рекомендую начать с http://css-tricks.com/fluid-width-equal-height-columns/) и разработать, какие из различных хаков и ограничений подходят для ваших целей. Это будет отличаться в зависимости от целевых браузеров, количества времени, которое вы хотите инвестировать, вашего опыта работы с Javascript и устройств, на которые вы нацеливаете.

источник

2014-11-22 19:20:28

Спасибо за все ваши ответы/комментарии.

Это, как я решил сейчас:

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

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

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

Я надеялся, что я могу сделать это с простым HTML/CSS, но да, это простой способ.

источник

2014-11-22 19:24:02 sleepless

Bootstrap: равная высота вложенных col-md- * элементов

ответ

Смежные вопросы