Установите столбцы равной высоте с помощью Bootstrap.

Question

Это как мой веб-страница в настоящее время ищет:

И то, что я хочу на высоту коробки 1 равный быть высотой коробки 3, если бы было больше текста, которые будут добавлен в поле 1 или 3 и т. Д. (И то же самое для ящиков 2 и 4, в то же время). Я также хочу, чтобы длина каждой стороны была короче, чтобы ее удлинить так, чтобы она была одинаковой длины более длинной стороны, в результате чего обе стороны (зеленая коробка и четыре коробки вместе) имели одинаковую высоту.

В основном: коробки 1, 2, 3 и 4 имеют одинаковую высоту. 4 коробки и зеленый ящик оба выдвигаются вниз, если необходимо, на одну и ту же высоту, так что высота зеленого ящика примерно вдвое превышает высоту одной меньшей коробки.

Это мой код в настоящее время:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6" id="big-box"> 
     <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/ 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="row"> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="firstBox">1</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="secondBox">2</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="thirdBox">3</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="fourthBox">4</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

С некоторыми основными CSS, чтобы изменить внешний вид текста и цвет фона и т.д.

Я попытался playoing вокруг с JavaScript, Bootstrap и свойств CSS попытаться сделать это возможным, но пока ничего не получилось. Любая помощь?

Заранее спасибо

Answer 1

лично я не люблю имена классов начальной загрузки, но это рядом с точкой. Так что я думаю, что вы должны изменить CSS:

.row { 
    position: relative; // set bounds for mini-box absolute. 
} 
.mini-box { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
} 

Answer 2

Я не большой поклонник загрузчике у меня есть альтернатива, Flexbox. у родителя есть height: 200px;, каждый из которых был в том же порядке, но я не мог исправить его вторым ребенком с row. поэтому я установил его с height: 95px; из-за 10px margin

.parent { 
 
    align-items: flex; 
 
    display: flex; 
 
    height: 200px; 
 
} 
 
row {} .child1 { 
 
    background-color: green; 
 
    color: #fff; 
 
    width: 300px; 
 
    margin: 0 10px; 
 
} 
 
.child2 { 
 
    background-color: grey; 
 
    color: #fff; 
 
    margin: 0 10px 10px; 
 
    height: 95px; 
 
} 
 
.child3 { 
 
    background-color: red; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    height: 95px; 
 
} 
 
.child4 { 
 
    background-color: pink; 
 
    color: #fff; 
 
    margin: 0 10px 10px; 
 
    height: 95px; 
 
} 
 
.child5 { 
 
    background-color: black; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    height: 95px; 
 
}

<div class="parent"> 
 
    <div class="child1">text big</div> 
 
    <div class="row"> 
 
    <div class="child2">text 1</div> 
 
    <div class="child3">text 2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="child4">text 3</div> 
 
    <div class="child5">text 4</div> 
 
    </div> 
 
</div>

css tricks для получения дополнительной информации через Flexbox