Question

文档没有指定如何指定切换的目标元素。因此，在按钮组中有两个下拉按钮会导致两个下拉菜单都被切换，无论单击按钮如何。有任何想法吗？我尝试使用data-target来选择目标，但这只会导致它完全停止工作。我在文档中搜索了一种指定要切换的目标元素的方法，但当然，它从未在文档中提及过。

<div class="btn-group master-btn">

    <button data-toggle="dropdown" data-target="#d1" class="btn dropdown-toggle btn-success">
        <i class="fa fa-plus"></i>
    </button>

    <ul class="dropdown-menu pull-left" id="d1">
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> New Item
            </a>
        </li>
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> Bulk Add
            </a> 
        </li>
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> New Category
            </a>
        </li>
    </ul>

    <button data-toggle="dropdown" data-target="#d2" class="btn dropdown-toggle btn-primary">
        <i class="fa fa-cog"></i>
    </button>

    <ul class="dropdown-menu pull-left" id="d2">
        <li><a href="">Save as PDF</a></li>
    </ul>

</div>

Answer 1

这是你如何制作自己的。真的只是一些小的CSS，使他们看起来连接。见例。

itertools

.big-button-grp .btn-group.big-button button {
  border-radius: 0;
}
.big-button-grp .btn-group.big-button:not(:first-child) > button {
  border-left: none;
}
.big-button-grp .btn-group.big-button {
  margin-left: -5px;
  border-radius: 0;
}

按钮组中的多个引导下拉按钮

1 个答案: