Bootstrap - 多个按钮下拉菜单相互干扰

Question

我有以下代码 - 3按钮下拉菜单彼此相邻，每个都有自己的唯一ID。但是，在前两个字母上按下插入符不会做任何事情，而按第3个插入符号时首先会出现下拉菜单。任何理由？我是否错过了为Button Group增加独特性的东西？ Bootstrap中的错误？

<div class="btn-group" id="all-sectors"> 
    <button class="btn btn-larger btn-primary title">All Sectors</button> 
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li> 
     <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li> 
      <li><a href="#" class="camera-filter" data-filter-type="North-Joe0">North-Joe0</a></li> 
     <li><a href="#" class="camera-filter" data-filter-type="East-Joe0">East-Joe0</a></li> 
    </ul> 
</div> 

<div class="btn-group" id="all-grids"> 
    <button class="btn btn-larger btn-primary title">All Grids</button> 
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li> 
     <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li> 
    </ul> 
</div> 

<div class="btn-group" id="all-cameras"> 
    <button class="btn btn-larger btn-primary title">All Cameras</button> 
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li> 
     <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li> 
    </ul> 
</div> 

Answer 1

问题出在我的CSS。我添加了一个

float:left; 

到每个.btn组停止前两个正常工作。我应该把它们包装在一个

.btn-toolbar 

包装代替。