Question

背景：

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

我的CSS如下所示：

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

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

.row {
    height: 300px;
}

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

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

Answer 1

你说：

单元格都具有无法修改的固定高度

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

.row {
    height: 300px;
}

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

计算所需图表的比例:(高度/宽度）* 100％。示例：图表为400x300px
在图表div周围添加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/

希望有所帮助。

无法在Bootstrap 4中更改行高

1 个答案: