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