问题描述
我是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>上面是我的正文部分中的代码。您能帮我找出问题所在吗？
非常感谢您的帮助，谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）