PHP的while循环内容在Bootstrap选项卡中是不可见的，当tab更改然后更改回来时，循环的内容变得可见

以下是两个标签：“产品”和“购物车”：

<div class="container" style="width: 800px">
<ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#products" role="tab" class="nav-link 
    active">Products</a></li>

    <li><a class="nav-link" data-toggle="tab" href="#cart" 
    role="tab">Cart</a></li>
</ul>

我的问题是，当页面加载时，循环从我的数据库带来的数据不会显示在屏幕上 . 但是，当我将标签更改为“购物车”然后更改回“产品”时，数据将显示为应有的状态 .

这是产品信息将进入的循环和div：

<div class="tab-content">
    <div id="products" class="tab-pane fade in active" role="tabpanel">
       <?php while ($product = mysqli_fetch_assoc($featured)): ?>
           <div class="col-md-4" style="margin-top:12px; ">
               <div style="border:1px solid #333; background-color: #f1f1f1; 
                ">

                   <img src="<?= $product['image'];?>" height="150" 
                   width="150">

                   <h4 class="text-info"><?php echo $product['title'];?> 
                   </h4>

                   <input type="hidden" id="name<?=$product['id'];?>" 
                   name="hidden_name" value="<?=$product['title'];?>">

                   <input type="hidden" id="price<?=$product['id'];?>" 
                   name="hidden_price" class="hidden_price" value="<? 
                   =$pric;?>">

                   <input type="button"  class="btn btn-warning form- 
                   control"name="cartbtn" id="<?=$product['id'];?>" 
                   value="Quick Add-to-Cart">

              </div>
          </div>
       <?php endwhile;?>

正如我之前所说，数据存在于那里，它不会出现在页面加载上 .

这是购物车标签（注意：以下代码仍在 <div class="tab-content"> and <div class="container style="width: 800px"> 的父div中）：

<div id="cart" class="tab-pane fade" role="tabpanel">
        <div class="table-responsive" id="order_table">
            <table class="table table-bordered">
                <tr>
                    <th width="40%">Product Name</th>
                    <th width="10%">Quantity</th>
                    <th width="20%">Price</th>
                    <th width="15%">Total</th>
                    <th width="5%">Action</th>
                </tr>
            </table>
        </div> 
    </div>
</div>  
</div>

另外，我正在使用Bootstrap 4.1.3