我正在使用Bootstrap 4来构建行和列的网格。除了左下方区域的3列之外，大部分内容都按照我喜欢的方式布局，我无法自动增长到它们所在行的最大高度。我为每个行和列添加了一个边框用于演示，并且我为列添加了蓝色背景，这些列不会自动调整到可能的高度。我已经尝试了所有我能想到的东西，并且不能让柱子自动增长到最大值。
我通常在3列中有charts.js个图表，当它们没有长到填满列的整个高度时，图表会被压扁并看起来很糟糕。任何帮助都将非常感谢！
我在这里构建了一个（希望）完整的代码集示例：
答案 0 :(得分：0)
虽然Bootstrap的row附带display: flex，但不幸的是，这些列没有。因此，如果您只想扩展蓝色方块以填充整个垂直空间，您只需添加以下CSS：
#A {
display: flex;
flex-direction: column;
}
可以看到工作here。
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.fullwidth {
width: 100% !important;
}
.fullheight {
height: 100% !important;
}
#A {
display: flex;
flex-direction: column;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>Template</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/starter-template.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" id="reportDropdown" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Account</button>
<button class="dropdown-item" id="sign-out" type="button">Sign Out</button>
</div>
</div>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="starter-template">
<h1 class="display-4">Title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-9 border" id="A">
<div class="row border" id="A1">
<div class="col-3 border">
<div class="row">
<div class="dropdown fullwidth">
<button class="btn btn-secondary dropdown-toggle fullwidth" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">A</a>
<a class="dropdown-item" href="#!">B</a>
<a class="dropdown-item" href="#!">C</a>
</div>
</div>
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 1
</p>
</div>
<input id="slider1" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 2
</p>
</div>
<input id="slider2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 3
</p>
</div>
<input id="slider3" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
</div>
<div class="col border">
A4
</div>
</div>
<div class="row bg-primary d-flex flex-fill" id="A2">
<div class="col-4 border">
<canvas id="chart1"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart2"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart3"></canvas>
</div>
</div>
</div>
<div class="col border" id="B">
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
A
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
B
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
C
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
D
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
E
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
F
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
G
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
H
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
</ul>
</div>
<div class="row border">
<div class="input-group input-group-sm">
<input type="text" placeholder="Enter a value" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-append">
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</div>
</div>
</div>
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
I
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
J
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
K
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
</ul>
</div>
<div class="row border" style="padding:3%">
<button type="button" class="btn btn-primary fullwidth">Done</button>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script>
<script src="assets/js/slider.js" rel="stylesheet"></script>
<script src="assets/js/chartCode.js" rel="stylesheet"></script>
<script src="assets/js/create.js" rel="stylesheet"></script>
</body>
</html>