bootstrap 3對齊按鈕組在下拉按鈕下面有一個微小間隙，而在導航標籤內

Question

我試圖在導航選項卡中使用Bootstrap 3.3.7來正確顯示對齊按鈕組。當按鈕組位於導航標籤之外時，一切看起來都不錯。但是，只要將按鈕組放置在導航標籤中，Windows Chrome上的「下拉」按鈕下方就會有一個小小的間隙。這裏是一個示例代碼，只要刪除整個「remove_me」元素，差距就會消失。無論如何，在使用任何類似Windows Chrome的瀏覽器時，要刪除導航標籤中「下拉」按鈕下方的小間隙？或者代碼有什麼問題，它會在「下拉」按鈕下面產生一個小間隙？提前致謝！

Sample code

Sample image

<div class="container"> 
    <div name="remove_me" class="row"> 
     <div class='col-md-7'> 
      <ul id="tabs" class="nav nav-tabs"> 
       <li class='active'><a href="#main" role="tab" data-toggle="tab">main tab</a></li> 
       <li><a href="#sub" role="tab" data-toggle="tab">sub tab</a></li> 
      </ul> 
     </div> 
    </div> 

    <div class="tab-content"> 
     <div class="tab-pane active" role="tabpanel" id="main"> 
      <div class="row"> 
       <div class="col-md-7"> 
        <div class="btn-group btn-group-justified" role="group"> 
         <a href="#" class="btn btn-primary" role="button">Left</a> 
         <a href="#" class="btn btn-primary" role="button">Middle</a> 
         <div class="btn-group" role="group"> 
          <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
          </ul> 
         </div> 
        </div> 
        <div class="btn-group btn-group-justified" role="group"><a href="#" class="btn btn-primary" role="button">extra button to show gap above this button</a></div> 
        There is a gap underneath the "Dropdown" button. 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane" role="tabpanel" id="sub">sub tab content</div> 
    </div> 
</div> 

Answer 1

這裏是jsfiddle。 只要嘗試這一行的CSS。

.dropdown-menu{ 
margin-top: 0; 
}