Невозможно изменить высоту строки в Bootstrap 4

Question

фона:

• Бутстрап 4
• 2 ряда, 4 колонки каждая
• Каждая ячейка содержит визуализацию с использованием Highcharts

Вопрос:

• клетки все имеют фиксированную высоту, которая не может быть изменена

Попытки:

• Инлайн height стиль для строки и отдельные ячейки
• Внешняя высота для ряда и отдельной клетки

У меня есть следующий div в моем HTML:

<div id="wrap"> 

    <div class="row"> 
     <div id="1" class="col-md-3"> 
      1 
     </div> 
     <div id="2" class="col-md-3"> 
      2 
     </div> 
     <div id="3" class="col-md-3"> 
      3 
     </div> 
     <div id="4" class="col-md-3"> 
      4 
     </div> 
    </div> 
    <div class="row"> 
     <div id="5" class="col-md-3"> 
      5 
     </div> 
     <div id="6" class="col-md-3"> 
      6 
     </div> 
     <div id="7" class="col-md-3"> 
      7 
     </div> 
     <div id="8" class="col-md-3"> 
      8 
     </div> 
    </div> 

</div> 

Мой CSS выглядит следующим образом:

body { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#wrap { 
    margin:0px; 
    padding:15px; 
} 

.row { 
    height: 300px; 
} 

Элементы отзывчивы по горизонтали и отображается правильно с соответствующими контрольными точками. Стили в строке не влияют. Круговая диаграмма внутри «ячейки» всегда является установленной высотой.

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

Answer 1

Вы сказали:

клетки все имеют фиксированную высоту, которая не может быть изменена

Это нормально, потому что вы зафиксировали высоту с этими линиями:

.row { 
    height: 300px; 
} 

Если вы хотите, чтобы ваши диаграммы масштабировались как по ширине, так и по высоте, с максимальной высотой 300 пикселей, вы можете сделать так:

1. Рассчитать соотношение требуемой диаграммы: (высота/ширина) * 100%. Пример: соотношение 75% на графике 400x300px

2. Добавляют 2-оболочки дивы вокруг диаграммы DIV:

<div class="wrapper"> 
    <div class="wrapper-in"> 
     <div class="chart"></div> 
    </div> 
</div> 

с этими стилями:

.row > div { 
    max-height: 300px; 
} 

.wrapper { 
    position: relative; 
    padding-bottom: 75%; /* your calculated ratio */ 
} 

.wrapper-in { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    max-height: 300px; 
} 

.chart { 
    width: 100%; 
    height: 100%; 
} 

Здесь вы можете увидеть пример: http://jsfiddle.net/kwvm0ohd/3/

Надеюсь, что это поможет.