Question

我有以下代码 - 3个按钮下拉菜单彼此相邻，每个菜单都有自己唯一的ID。但是，按下第一个2上的插入符不做任何操作，而按下第三个插入符使第一个下拉菜单出现。有什么理由吗？我错过了一些为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

而不是

包装。

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

1 个答案: