Twitter bootstrap 无法更改引导4中的行高度

背景：

• 引导程序4
• 2行，每行4列
• 每个单元格都包含一个使用HighCharts的可视化

问题:

• 所有单元格都有固定高度，不能修改

尝试：

• 行和单个单元格的内联

  height

  样式
• 行和单个单元格的外部高度

我的HTML中有以下

div

：

<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>

元素水平响应，并使用适当的断点正确显示。行上的样式没有影响。“单元格”中的饼图始终是一个设定的高度

我想这可能是因为图表溢出，但是在.js中为图表设置一个固定的图表，会使图表变小，但使div保持相同大小（下面的元素被向下推）。

你说：

所有单元格都有固定高度，不能修改

这是正常的，因为您使用这些线固定了高度：

.row {
    height: 300px;
}

如果希望图表同时缩放宽度和高度，最大高度为300px，可以这样做：

计算所需图表的比率：（高度/宽度）*100%。 示例：400x300px图表的75%比率

在图表分区周围添加2个包装分区：

您可以在此处看到一个示例：

---

希望有帮助。

Highcharts从包含它的div继承了它的高度和宽度。我没有定义任何宽度或高度。当我测试高度（手动）时，它调整了可视化的大小，但底层div没有收缩。另外，还有一个额外的测试：如果我删除可视化，只做一个背景色，并尝试调整div的大小，它也不会调整大小。对不起，但我肯定能理解。如果希望图表出现溢出，可以定义这样的容器：jsfiddle.net/kwvm0ohd/1在提供的示例中，它的行为与我看到的非常相似。无论窗口的宽度如何，图表的高度都无法更改。我想在保持响应性的同时，将图表高度设置为最大300px。如果我设置

.row{height:100px；}

它应该工作吗？目前对实际布局没有影响。尝试将

.row{height:100px；}

替换为

.row>div{max height:100px；}

并将.wrapper的最大高度固定为100px。如果它不起作用，请毫不犹豫地显示您的代码（使用图表），il将更容易帮助您。

.row {
    height: 300px;
}

<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%;
}