我有一个包含 4 列的 Bootstrap 行 (col-lg-3)。其中一列中有一个 tab-content 元素。当页面呈现时，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 像素。
关于html - Bootstrap 4 Tab On Click 不填充内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56010916/