我正在设计仪表板，并尝试在同一行容器div中使2 div（引导卡）具有相同的高度。已经在SO上搜索了一些解决方案，复制并粘贴了这些解决方案，但似乎无法正确解决。当屏幕在引导程序4中为lg（大）或更高时，我正在尝试使“辞职分解” div与“ {月}辞职” div的高度相同。
#resign-widget.row.col-lg-4.card {
height = 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
<a href="#" class="btn btn-primary">Login to Prosoft</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
<a href="#" class="btn btn-primary">Login to Salesforce</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
<a href="#" class="btn btn-primary">Login to Xero</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>
答案 0 :(得分：1)
您可以将卡片的高度设置为其父元素的100％，在这种情况下为col。由于两个col的高度相同，因此该技术将起作用。
#resign-widget.row.col-lg-4.card {
height = 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
<a href="#" class="btn btn-primary">Login to Prosoft</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
<a href="#" class="btn btn-primary">Login to Salesforce</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span><a href="#"></a>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
<a href="#" class="btn btn-primary">Login to Xero</a>
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>