标签视图中显示的列表

Question

我正在使用bootstrap 4.0加载我的标签页。我正在使用以下代码：

<div>
       <ul class="nav nav-tabs" id="myTab" role="tablist">
           <li class="nav-item">
               <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" id="categories-tab" data-toggle="tab" href="#categories" role="tab" aria-controls="categories" aria-selected="false">Categories</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false">Product</a>
           </li>
       </ul>
       <div class="tab-content" id="myTabContent">
           <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">...</div>
           <div class="tab-pane fade" id="categories" role="tabpanel" aria-labelledby="categories-tab">...</div>
           <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product-tab">...</div>
       </div>
   </div>

但是，当我加载页面时，列表项目显示在选项卡旁边。

任何建议我做错了什么？

感谢您的答复！