css - 增加引导图的高度
问题描述
我正在尝试将此图向下拉伸以覆盖空白区域。我已经尝试了几种选择,但到目前为止没有运气。一点帮助将不胜感激。
这是代码:
<div class="row">
<div class="col-lg-12 col-xl-8 offset-lg-0">
<div class="card shadow mb-4 h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Total Returns % </h6>
<div class="dropdown no-arrow"><button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button"></button>
<div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
<p class="text-center dropdown-header">dropdown header:</p><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>
</div>
</div>
<div><canvas data-bss-chart="{"type":"line","data":{"labels":["2016","2017","2018","2019","2020","2021"],"datasets":[{"label":"Xross","backgroundColor":"#4e73df","borderColor":"#4e73df","data":["64","152","211","246","416","513"],"fill":false},{"label":"KSE-100","fill":false,"data":["15","17","18","-10","27","42"],"backgroundColor":"rgba(238,0,0,0.81)","borderColor":"rgba(238,0,0,0.81)","borderWidth":"3"}]},"options":{"maintainAspectRatio":true,"legend":{"display":true,"labels":{"fontStyle":"normal"},"position":"top"},"title":{"fontStyle":"bold"},"scales":{"xAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":false}}],"yAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":false}}]}}}"></canvas></div>
<div class="card-body" style="transform: perspective(0px);height: 471;padding: 0;"></div>
</div>
</div>
<div class="col-lg-12 col-xl-4 offset-lg-0">
<div class="card shadow mb-4 h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0"><br><strong>Annual Returns % (1-Sept to 30-Aug)</strong><br><br></h6>
<div class="dropdown no-arrow"><button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button"></button>
<div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
<p class="text-center dropdown-header">dropdown header:</p><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>
</div>
</div>
<div class="card-body">
<div class="text-start shadow" style="border-color: var(--bs-blue);color: var(--bs-blue);height: 471;"><canvas data-bss-chart="{"type":"bar","data":{"labels":["2016","2017","2018","2019","2020","2021"],"datasets":[{"label":"Xross","backgroundColor":"#4e73df","borderColor":"#4e73df","data":["64","88","59","35","170","97"]},{"label":"KSE-100","backgroundColor":"rgba(255,2,17,0.7)","borderColor":"rgba(211,15,15,0.1)","data":["15","2","1","-28","38","14"]}]},"options":{"maintainAspectRatio":true,"legend":{"display":true,"labels":{"bold":false,"italic":false,"fontColor":"#666","fontStyle":"normal"},"position":"bottom"},"title":{"fontStyle":"bold","display":false},"scales":{"xAxes":[{"gridLines":{"drawBorder":true,"drawTicks":true,"borderDash":["0"],"zeroLineBorderDash":["0"],"drawOnChartArea":false},"ticks":{"fontStyle":"normal","beginAtZero":false}}],"yAxes":[{"gridLines":{"drawBorder":true,"drawTicks":true,"borderDash":["0"],"zeroLineBorderDash":["0"],"drawOnChartArea":true},"ticks":{"fontStyle":"normal","beginAtZero":false}}]}}}"></canvas></div>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- flutter-web - 如何并行托管多个 Flutter Web 应用程序
- c++ - 如何在数组中查找奇数位数?
- r - 尝试计算 R 中每个登录 ID 的失败尝试次数
- azure-sql-database - 使用 ADF 将数据移动到 Azure SQL 时,为什么外部 IP 需要访问本地 sql 数据库?
- python - UnicodeDecodeError: 'utf-8' codec can't decode byte 0xe4 in position 1: invalid continuation byte in Django
- apache-kafka - 与 spring cloud kafka stream 加入一对多关系
- python - VS 代码上的导入错误
- postgresql - 无法通过 PL/pgSQL 函数动态创建表备份
- php - Zend 2 表单中的 Diasble 转义
- visual-studio-2019 - VS 2019:如何导出 StyleCop.Analyzers 设置