面板主體中的多個下拉按鈕同時打開

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/