twitter-bootstrap - 列表显示在选项卡视图中

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>

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

有什么建议我做错了吗？

感谢您的回复！

标签： twitter-bootstrapbootstrap-4