html - Bootstrap 4 Tab On Click不填充内容
问题描述
我有一个 4 列的引导行(col-lg-3)。在其中一列中是选项卡内容元素。当页面呈现时,javascript 会正确填充并填充卡片,但是,当我单击下一个选项卡时,内容会溢出框并且根本不会在 div 宽度内呈现。
我尝试将 style="width:200px" 添加到此列中的任何和所有 div 容器,但是当我单击选项卡时,它们都不会产生。
标签内容代码:
<div class="col-lg-3 align-items-stretch">
<div class="card">
<div class="card-header bg-14">
<h2><?php echo $lang_top_airlines ?></h2>
</div>
<div class="card-body">
<div class="tab-content" id="nav-TopAirlines" style="width:250px">
<div class="tab-pane fade show active" id="nav-airlines-flights" role="tabpanel" aria-labelledby="nav-airline-flights">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT count(*) as countLVM, lvm.luchtvaartmaatschappij AS naam, lvm.IATACode
FROM tbl_vluchtgegevens vg
LEFT JOIN tbl_luchtvaartmaatschappij lvm
ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
WHERE vertrekdatum2 <=NOW()
GROUP BY lvm.luchtvaartmaatschappij
ORDER BY countLVM DESC
LIMIT 10";
$dataAF = $link->query($sql);
$dataPointsAF = array();
if ($dataAF->num_rows > 0) {
while($rowAF = $dataAF->fetch_assoc()) {
$pointAF = array("label" => $rowAF['IATACode'], "y" => $rowAF['countLVM'], "name"=> $rowAF['naam']);
array_push($dataPointsAF, $pointAF);
}
}
$link->close();
?>
<div id="TopAirlinesFlights" style="width: 200px; height: 300px;"></div>
</div>
<div class="tab-pane fade" id="nav-airlines-distance" role="tabpanel" aria-labelledby="nav-airline-distance">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT lvm.luchtvaartmaatschappij AS naam, lvm.IATACode, SUM(vr.afstand) as SumDistance
FROM tbl_vluchtgegevens vg
LEFT JOIN tbl_vliegroutes vr
ON vg.vertrekluchthaven = vr.vertrekID
AND vg.aankomstluchthaven = vr.aankomstID
LEFT JOIN tbl_luchtvaartmaatschappij lvm
ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
WHERE vg.vertrekdatum2 <=NOW()
GROUP BY lvm.luchtvaartmaatschappij
ORDER BY SumDistance DESC
LIMIT 10;";
$dataAirD = $link->query($sql);
$dataPointsAirD = array();
if ($dataAirD->num_rows > 0) {
while($rowAirD = $dataAirD->fetch_assoc()) {
$pointAirD = array("label" => $rowAirD['IATACode'], "y" => $rowAirD['SumDistance'], "name"=> $rowAirD['naam']);
array_push($dataPointsAirD, $pointAirD);
}
}
$link->close();
?>
<div id="TopAirlinesDistance" style="width: 200px; height: 300px;"></div>
</div>
</div>
<nav>
<div class="nav nav-fill nav-pills" id="nav-airline" role="tablist">
<a class="nav-item nav-link active" role="tab" id="nav-airline-flights" data-toggle="tab" href="#nav-airlines-flights" aria-controls="nav-airlines-flights" aria-selected="true"><i class="fas fa-plane-departure"></i> by Flights</a>
<a class="nav-item nav-link" role="tab" id="nav-airline-distance" data-toggle="tab" href="#nav-airlines-distance" aria-controls="nav-airlines-distance" aria-selected="false">
<i class="fas fa-map-marked-alt"></i> by Distance</a>
</div>
</nav>
</div>
</div>
</div>
Javascript代码(以防我在这里遗漏了一些东西):
<script type="text/javascript">
$(function () {
CanvasJS.addColorSet("blueShades2",
[//colorSet Array
"#074b83",
"#085a9d",
"#0a69b7",
"#0b78d1",
"#0c87eb",
"#2196f3",
"#4daaf6",
"#79bff8",
"#a6d4fa",
"#d2eafd"
]);
var TopAirports = new CanvasJS.Chart("TopAirports", {
zoomEnabled: false,
axisX:{
reversed: true
},
animationEnabled: true,
colorSet: "blueShades2",
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsTA, JSON_NUMERIC_CHECK); ?>
}]
});
var TopAirlinesFlights = new CanvasJS.Chart("TopAirlinesFlights", {
zoomEnabled: false,
animationEnabled: true,
colorSet: "blueShades2",
axisX:{
reversed: true
},
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsAF, JSON_NUMERIC_CHECK); ?>
}]
});
var TopAirlinesDistance = new CanvasJS.Chart("TopAirlinesDistance", {
zoomEnabled: false,
animationEnabled: true,
colorSet: "blueShades2",
axisX:{
reversed: true
},
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsAirD, JSON_NUMERIC_CHECK); ?>
}]
});
TopAirlinesFlights.render();
TopAirports.render();
TopAirlinesDistance.render();
});
</script>
解决方案
如果您知道宽度需要为 200px,那么您可以设置:max-width:200px。
当屏幕尺寸变为更大的屏幕时,您将需要使用媒体查询来继续调整最大宽度值。如果您不这样做,那么它将始终保持在 200 像素。
推荐阅读
- reactjs - 传递道具和条件的简单有效的方式
- android - 将多个 ScanFilter 与 BluetoothLeScanner 一起使用是否安全?
- javascript - Rollup 将 Js 构建成 cjs 和 es 两个文件的原因是什么
- javascript - OpenLayers - 编辑功能(隐藏/显示,更改图标)
- elasticsearch - 在弹性搜索中将子项添加到父文档的嵌套字段中
- c++ - NE10库中FFT函数的输入范围是多少
- ios - 有没有办法为工业增强现实构建 iOS 应用程序?
- ios - 如何为 RadDataForm ListPicker 的选择器设置样式
- c# - 数组是否实现了 IEnumerable
? - flutter - 我的 AppBar 在屏幕上的图像后面,或者我看不到它,有什么建议可以在顶部显示我的 AppBar 和 buttonNavigator 并且是半透明的吗?