第一次加载时显示的所有选项卡窗格（Bootstrap）

Question

我正在开发一个网页，而我实际上正在使用Bootstrap和类标签窗格。

不幸的是，我有一个问题，当我打开我的页面时，每个窗格都显示一个在另一个下面。然后当我在窗格之间进行一次切换时，一切都会恢复正常。

我和Laravel一起开发;我不认为有这种关系，但也许是因为这个？

我的HTML：

   <div id="cruise-features" class="tab-container">
   <ul class="tabs">
      <li class="active"><a href="#cruise-description" data-toggle="tab">Description</a></li>
      <li><a href="#cruise-availability" data-toggle="tab">Availability</a></li>
      <li><a href="#cruise-amenities" data-toggle="tab">Amenities</a></li>
      <li><a href="#cruise-food-dinning" data-toggle="tab">Food &amp; Dinning</a></li>
      <li><a href="#cruise-reviews" data-toggle="tab">Reviews</a></li>
      <li><a href="#cruise-write-review" data-toggle="tab">Write a Review</a></li>
  </ul>
  <div class="tab-content">
       @include('common.description_product')
       @include('common.availability_product')
       <div class="tab-pane fade" id="cruise-amenities">
          ...
       </div>
       @include('common.dinning_product')
       @include('common.reviews_product')
       @include('common.write_review_product')
 </div>

正在发生的事情的一个例子：

应该发生什么的一个例子：

请注意meteo细分下的差异。

你们有没有想过为什么会这样？

Answer 1

感谢@Leandro Soares我有我的答案=）

我的标签上有不止一次的课程active in。