Question

我有几张（bootstrap）卡，希望有机会在全屏显示。这些卡片中包含高图图表。问题在于，在全屏模式下，高图的高度无法适应。

前一段时间，我对引导面板提出了相同的问题，然后“ daniel_s”为面板提出了此示例。直到现在，我在底部添加了许多列，并且已将其从面板转换为卡片。不幸的是，该示例不再起作用。再次以“ daniel_s”为例，但高度仍不是100％。

是否可以自动调整高图的比例，以使比率（底部和标题的列）保持与本示例相同？

此外，我还想知道如何在一行中获得标题文本和图标。这样，文本在左侧，图标在右侧。

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="card with-margin card_shadow card_border rounded">
        <div class="container-fluid" id="mainContainer">
          <div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
            <h3>Panel 1</h3>
            <li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
          </div>
          <div class="row">
            <div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
              <div id="container"></div>
            </div>
          </div>
          <div class="row bg-white justify-content-center card_border">
            <div class="col-sm text-center card_border2">
              <br> text 1
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 2
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 3
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 4
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-lg-3">
      <div class="card with-margin card_shadow card_border rounded">
        <div class="container-fluid" id="mainContainer">
          <div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
            <h3>Panel 2</h3>
            <li class="list-inline-item"><a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
          </div>
          <div class="row">
            <div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
              <div id="container2"></div>
            </div>
          </div>
          <div class="row bg-white justify-content-center card_border">
            <div class="col-sm text-center card_border2">
              <br> text 1
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 2
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 3
            </div>
            <div class="col-sm text-center card_border2">
              <br> text 4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.panel-actions {
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}
#mainContainer {
  height: 50%;
}
.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}
.full-height-row {
  height: 100%;
  width: 100%;
}
#container {
  height: 100%;
}
#container2 {
  height: 100%;
}
.row-200 {
  height: 220px;
}

.card_border {
  border: solid 0.75px #fa7921;
}

.card_border2 {
  border: solid 2px #fa7921;
}

JavaScript

$(document).ready(function() {
  var charts = [];
  var chart1Info = {
    containerId: "container",
    definition: {
      title: {
        text: "Chart1 Title"
      },
      subtitle: {
        text: "Source: thesolarfoundation.com"
      },
      yAxis: {
        title: {
          text: "Number of Employees"
        }
      },
      legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle"
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [
        {
          name: "Installation",
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        },
        {
          name: "Manufacturing",
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        },
        {
          name: "Sales & Distribution",
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        },
        {
          name: "Project Development",
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        },
        {
          name: "Other",
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }
      ]
    }
  };
  var chart2Info = {
    containerId: "container2",
    definition: {
      title: {
        text: "Chart2 Title"
      },
      subtitle: {
        text: "Source: thesolarfoundation.com"
      },
      yAxis: {
        title: {
          text: "Number of Employees"
        }
      },
      legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle"
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [
        {
          name: "Installation",
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        },
        {
          name: "Manufacturing",
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        },
        {
          name: "Sales & Distribution",
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        },
        {
          name: "Project Development",
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        },
        {
          name: "Other",
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }
      ]
    }
  };

  function drawChart(chartInfo) {
    // Properties that vary by chart should be defined in chartInfo
    // Any properties that are the same for all charts are added here
    chartInfo.responsive = {
      rules: [
        {
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom"
            }
          }
        }
      ]
    };

    if (chartInfo == chart1Info) {
      charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    } else {
      charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    }
  }
  //Toggle fullscreen
  $(".fullscreen-btn").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    $this
      .children("i")
      .toggleClass("fa-expand")
      .toggleClass("fa-arrows-alt");
    $(this)
      .closest(".card")
      .toggleClass("panel-fullscreen");
    $($(this).parents()[3])
      .find(".card-body")
      .toggleClass("row-200");

    var chartInfo =
      $this.attr("id") === "panel-fullscreen" ? chart1Info : chart2Info;
    drawChart(chartInfo);
  });

  drawChart(chart1Info);
  drawChart(chart2Info);
});

在此example中可以看到，高度不是100％，而在此example中，高度是100％。在第一个示例中，如何管理高度始终为100％。

Answer 1

我已经研究了两个示例，并且可能找到了解决方法。

在您的工作示例中，所有元素都位于一个容器panel中，该容器的高度设置为100％，子容器panel-heading的高度为94％。
在有此问题的示例中，有一张“卡”的高度设置为100％，子container-fluid的内部rows的高度未设置固定值。
< / li>

因此您可以看到行不知道如何共享屏幕上的空间。要解决此问题，您必须设置CSS样式，以使container-fluid的高度为100％，例如，上排为10％，中排为80％，底排为10％。然后，所有元素都将正确呈现，如下所示：

具有高图的全屏引导4卡

1 个答案: