html - Bootstrap：使用 Bootstrap 管理模板后选项卡内容无法正确显示
问题描述
我是 HTML 和 CSS 的新手，尝试在我的选项卡内容中使用下表https://startbootstrap.github.io/startbootstrap-sb-admin-2/tables.html 时无法正确显示。由于其他选项卡内容低于我的选项卡 2 选项卡内容。
当我没有在其中使用 sb-admin-2 表时，此选项卡工作正常。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<li><a class="nav-link active" data-toggle="tab" href="#tab-1">Tab 1</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-2">Tab 2</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-3">Tab 3</a></li>
</ul>
<div class="tab-content">
<!-- Tab 1 Content -->
<div role="tabpanel" id="tab-1" class="tab-pane active">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<!-- End of Tab 1 Content -->
<!-- Tab 2 Content -->
<div role="tabpanel" id="tab-2" class="tab-pane">
<div class="panel-body">
<div class="card shadow mb-4">
<div class = "card-body">
<div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-responsive table-hover dataTable display" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 100px;">Date</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 50px;">Name</th>
</tr>
</thead>
<tfoot>
<tr><th rowspan="1" colspan="1">Date</th><th rowspan="1" colspan="1">Name</th></tr>
</tfoot>
<tbody>
<tr><td>19-12-2000</t><td>Chris</td></tr>
<tr><td>03-06-2014</td?<td>John</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Tab 2 Content Tables -->
<!-- Tab 3 Content -->
<div role="tabpanel" id="tab-3" class="tab-pane active">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<!-- End of Tab 3 Content -->
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/js/sb-admin-2.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/js/demo/datatables-demo.js"></script>
</body>
</html>以上是我正文部分的代码。你能帮我弄清楚出了什么问题吗？
非常感谢帮助，谢谢
解决方案
我使用您的代码进行更正。
您没有在 .li 标签中添加 .nav-item 类。
表格代码中的一些结束标签问题。这是一些结束标签的问题。重新查看您的代码。
在 .tbody 标签中
在第一个 .td 标记中，您在结束 .td 标记时忘记了“d”。在第二个 .td 标签中你放了“？” 代替“>”。
因此，这些小错误会在您的代码中产生问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<br>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-1">Tab-1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-2">Tab-2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-3">Tab-3</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tab-1" class="container tab-pane active"><br>
<h3>Tab-1</h3>
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div id="tab-2" class="container tab-pane fade"><br>
<h3>Tab-2</h3>
<table class="table table-bordered table-responsive table-hover dataTable display" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 100px;">Date</th>
<th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 50px;">Name</th>
</tr>
</thead>
<tfoot>
<tr><th rowspan="1" colspan="1">Date</th><th rowspan="1" colspan="1">Name</th></tr>
</tfoot>
<tbody>
<tr><td>19-12-2000</td><td>Chris</td></tr>
<tr><td>03-06-2014</td><td>John</td></tr>
</tbody>
</table>
</div>
<div id="tab-3" class="container tab-pane fade"><br>
<h3>Tab-3</h3>
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
</div>
</div>
</body>
</html>推荐阅读
- command-line - .exe 从不抛出错误
- javascript - 在 jsp 中使用 sweetalert javascript 函数
- java - MidiSystem.getMidiDevice(...) 返回意外的类
- javascript - 在 laravel 中访问 JavaScript 变量
- javascript - 我可以从子组件更改父组件的css吗
- excel - Excel VBA：清理代码
- javascript - 返回 CSS 宽度作为公式而不是计算值
- javascript - 以角度 5 对日期进行排序，值大于 10
- git - 如何防止在一个分支中被忽略的文件在 git 的另一个分支中被检测到？
- ionic3 - 检查列表中的元素是否离子 3