Bootstrap 3分段下拉和按钮间距

Question

我试图创建一个按钮组，这是文本输入，然后下拉提交按钮。

我希望他们全部加入Like Here但是，在下拉菜单之后，我找不到原因。

<form class="col-lg-10"> 
    <div class="input-group"> 
    <input class="form-control" type="text"> 
    <div class="input-group-btn"> 

     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> 
     hoose <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
     </button> 

     <ul class="dropdown-menu pull-right" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
     <button class="btn btn-default btn-success" type="button"><span class="glyphicon glyphicon-search"></span> Search</button> 
    </div> 
    </div><!-- /.input-group --> 
</form> 

Here's a fiddle

Answer 1

这是因为该输入组中的元素是display: inline-block。

内联元素之间的任何空间都会创建“空间”。

如果您删除</button><ul>和</ul><button>之间的空格（和换行符），那么您将失去该空位。

这个技巧在许多情况下会给出“意想不到的差距”，任何CSS开发人员都应该写下这种行为，以便将来修复bug。