PHP的“循环”内容在“引导程序”选项卡中不可见，如果更改了选项卡然后又改回来，则循环的内容变为可见

Question

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

<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>

我的问题是，页面加载时，循环从数据库中获取的数据没有显示在屏幕上。但是，当我将选项卡更改为“购物车”，然后又更改回“产品”时，数据将按原样显示。

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

<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