首页 > 解决方案 > 增加引导图的高度

问题描述

在此处输入图像描述

我正在尝试将此图向下拉伸以覆盖空白区域。我已经尝试了几种选择,但到目前为止没有运气。一点帮助将不胜感激。

这是代码:

<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 %&nbsp;&nbsp;</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="#">&nbsp;Action</a><a class="dropdown-item" href="#">&nbsp;Another action</a>
                                              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">&nbsp;Something else here</a>
                                          </div>
                                      </div>
                                  </div>
                                  <div><canvas data-bss-chart="{&quot;type&quot;:&quot;line&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;2016&quot;,&quot;2017&quot;,&quot;2018&quot;,&quot;2019&quot;,&quot;2020&quot;,&quot;2021&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Xross&quot;,&quot;backgroundColor&quot;:&quot;#4e73df&quot;,&quot;borderColor&quot;:&quot;#4e73df&quot;,&quot;data&quot;:[&quot;64&quot;,&quot;152&quot;,&quot;211&quot;,&quot;246&quot;,&quot;416&quot;,&quot;513&quot;],&quot;fill&quot;:false},{&quot;label&quot;:&quot;KSE-100&quot;,&quot;fill&quot;:false,&quot;data&quot;:[&quot;15&quot;,&quot;17&quot;,&quot;18&quot;,&quot;-10&quot;,&quot;27&quot;,&quot;42&quot;],&quot;backgroundColor&quot;:&quot;rgba(238,0,0,0.81)&quot;,&quot;borderColor&quot;:&quot;rgba(238,0,0,0.81)&quot;,&quot;borderWidth&quot;:&quot;3&quot;}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:true,&quot;labels&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;},&quot;position&quot;:&quot;top&quot;},&quot;title&quot;:{&quot;fontStyle&quot;:&quot;bold&quot;},&quot;scales&quot;:{&quot;xAxes&quot;:[{&quot;ticks&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;,&quot;beginAtZero&quot;:false}}],&quot;yAxes&quot;:[{&quot;ticks&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;,&quot;beginAtZero&quot;: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="#">&nbsp;Action</a><a class="dropdown-item" href="#">&nbsp;Another action</a>
                                              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">&nbsp;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="{&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;2016&quot;,&quot;2017&quot;,&quot;2018&quot;,&quot;2019&quot;,&quot;2020&quot;,&quot;2021&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Xross&quot;,&quot;backgroundColor&quot;:&quot;#4e73df&quot;,&quot;borderColor&quot;:&quot;#4e73df&quot;,&quot;data&quot;:[&quot;64&quot;,&quot;88&quot;,&quot;59&quot;,&quot;35&quot;,&quot;170&quot;,&quot;97&quot;]},{&quot;label&quot;:&quot;KSE-100&quot;,&quot;backgroundColor&quot;:&quot;rgba(255,2,17,0.7)&quot;,&quot;borderColor&quot;:&quot;rgba(211,15,15,0.1)&quot;,&quot;data&quot;:[&quot;15&quot;,&quot;2&quot;,&quot;1&quot;,&quot;-28&quot;,&quot;38&quot;,&quot;14&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:true,&quot;labels&quot;:{&quot;bold&quot;:false,&quot;italic&quot;:false,&quot;fontColor&quot;:&quot;#666&quot;,&quot;fontStyle&quot;:&quot;normal&quot;},&quot;position&quot;:&quot;bottom&quot;},&quot;title&quot;:{&quot;fontStyle&quot;:&quot;bold&quot;,&quot;display&quot;:false},&quot;scales&quot;:{&quot;xAxes&quot;:[{&quot;gridLines&quot;:{&quot;drawBorder&quot;:true,&quot;drawTicks&quot;:true,&quot;borderDash&quot;:[&quot;0&quot;],&quot;zeroLineBorderDash&quot;:[&quot;0&quot;],&quot;drawOnChartArea&quot;:false},&quot;ticks&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;,&quot;beginAtZero&quot;:false}}],&quot;yAxes&quot;:[{&quot;gridLines&quot;:{&quot;drawBorder&quot;:true,&quot;drawTicks&quot;:true,&quot;borderDash&quot;:[&quot;0&quot;],&quot;zeroLineBorderDash&quot;:[&quot;0&quot;],&quot;drawOnChartArea&quot;:true},&quot;ticks&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;,&quot;beginAtZero&quot;:false}}]}}}"></canvas></div>
                                  </div>
                              </div>
                          </div>
                    </div>

标签: cssbootstrap-4web-frontend

解决方案


推荐阅读