下面的代码显示了一个 HTML 滚动条。
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body >
<div class="container-fluid">
<div class="row">
<div id="oCol1" class="col-sm-12 col-xs-12 col-md-6">
<div class="table-responsive" style="width:100%">
<table style="width:100%; border: none" >
<tr>
<td>
<div class="row">
<div class="col-sm-12">
Test
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
这是我能做到的最简单的 - 代码已生成。为什么我用这个 HTML 得到一个水平滚动条。我无法添加溢出：隐藏，因为在其他场景中会有广泛的内容 - 这种情况不是其中之一。
水平滚动条的原因与引导程序有关。如果您检查表和行，您会发现
--bs-gutter-x: 0;.row{--bs-gutter-x: 0 !important;}下面是相同的工作示例，如果我错过了某些内容，请分享。
注意：下面运行时的垂直滚动条仅在 SO 中可见
.row {
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h2 class="mainDiv">
<div class="container-fluid">
<div class="row">
<div id="oCol1" class="col-sm-12 col-xs-12 col-md-6">
<div class="table-responsive" style="width:100%">
<table style="width:100%; border: none">
<tr>
<td>
<div class="row">
<div class="col-sm-12">
Test
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</h2>
<script>
console.log("Welcome to CCE")
</script>
</body>
</html>