隐藏在其他行后面的Bootstrap下拉菜单

Question

我有GroupBy：威胁名称和潜在影响下拉按钮但

当数据从具有id＆＃34; listThreat＆＃34;的div中的服务器加载时，下拉菜单未获取显示。

当数据未显示时，下拉列表工作正常但当我点击任何下拉菜单选项元素时，它会显示对页面中所有按钮的影响，如潜在的影响按钮名称更改为元素。 下面是我的代码

    <div class="panel" style="border: 1px solid black; height: 100vh"
                    id="ThreatList">
                    <header class="panel-heading">
                        <div class="row">
                            <!--first row of  column -->
                            <div class="col-sm-6">
                                <div>Threat List</div>
                            </div>
                            <div class="col-sm-6">
                                <div>Total Threat:</div>
                            </div>

                        </div>
</header>



                    <div class="row">
                        <!--second row of column -->
                        <div class="col-sm-6">
<div class="dropdown">
                                <button class="btn btn-primary btn-xs dropdown-toggle"
                                    type="button" data-toggle="dropdown">Group By:threat
                                    Name</button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Element</a></li>
                                    <li><a href="#">Threat Name</a></li>

                                </ul>
                            </div>


                        </div>
                        <div class="col-sm-6">
                            <div class="dropdown">
                                <button class="btn btn-primary btn-xs  dropdown-toggle"
                                    type="button" data-toggle="dropdown">Sort By:Potential
                                    Impect</button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Potential Impect</a></li>
                                    <li><a href="#">Mitigation</a></li>
                                    <li><a href="#">Validation</a></li>

                                </ul>
                            </div>
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="listThreat"></div>
                            <!-- end of second row -->
                        </div>
                    </div>


                </div>
            </div>