Bootstrap：使用 Bootstrap 管理模板后选项卡内容无法正确显示答案

【问题标题】：Bootstrap: Tab content does not show up correctly after using Bootstrap Admin TemplateBootstrap：使用 Bootstrap 管理模板后选项卡内容无法正确显示
【发布时间】：2020-08-21 08:41:32
【问题描述】：

我是 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>

以上是我正文部分的代码。你能帮我找出问题所在吗？

非常感谢您的帮助，谢谢

【问题讨论】：

标签： html bootstrap-4 tabs

【解决方案1】：

我使用您的代码进行更正。

您没有在 .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>

【讨论】：

【解决方案2】：

您错过了向文档添加脚本。要让 Bootstrap 工作，您需要 bootstrap css 和 Jquery。

将 JQuery 链接添加到您的头部

在页面底部添加 Bootstrap min js：

【讨论】：

包含上述链接后，我仍然遇到同样的错误。