面板主体中的多个下拉按钮同时打开

Question

我正在使用Bootstrap 3.7，并且在面板主体中有两个按钮，但是每当我单击其中一个按钮时，两个按钮都会打开其下拉菜单。

 <div class="static">
   <div class ="container">
      <div class="panel panel-default">
         <div class="panel-heading">
            <ul class="nav nav-pills nav-justified" role="tablist">
               <li class="active"><a href="#">Booking</a></li>
               <li><a href="#">Flight Times</a></li>
               <li><a href="#">My Trips</a></li>
            </ul>
         </div>
         <div class="panel-body">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
               data-toggle="dropdown">From
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
               <li><a href="#">London Stanstead Airport (<strong>STN</strong>)</a></li>
            </ul>
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
               data-toggle="dropdown">To
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
               <li><a href="#">Manchester (<strong>MAN</strong>)</a></li>
               <li><a href="#">Glasgow (<strong>GLA</strong>)</a></li>
               <li><a href="#">Dublin (<strong>DUB</strong>)</a></li>
               <li><a href="#">Paris (<strong>CDG</strong>)</a></li>
               <li><a href="#">Madrid (<strong>MAD</strong>)</a></li>
               <li><a href="#">Brussels (<strong>BRU</strong>)</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>

有没有办法解决这个问题？

Answer 1

您必须将每个按钮下拉列表包装到.btn组本身中，如下所示： https ://www.bootply.com/ErHpvikz6x

您可以在Bootstrap文档中查看详细信息： https : //getbootstrap.com/docs/3.3/components/