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

我正在使用Bootstrap4.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>

...
...
...

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

有什么建议我做错了什么

---

谢谢你的回复

穿上很好看。您是否正在更改

css

中的列表样式？@StaticBeagle是否有办法通过css隐藏列表项目符号？感谢您的回复！是的，您可以使用

.nav.nav-tabs{list style:none；}

，但是默认情况下，

引导程序应该这样做。一定有什么东西覆盖了默认行为。