如何使用一个具有下拉菜单的按钮创建按钮组？

Question

如何使用一个具有下拉菜单的按钮创建按钮组？我问,因为在这种情况下,菜单不会显示在按钮下方/下方,而是显示在左页边框处.如果我删除组按钮类(class ="btn-group")(我得到独立按钮)下拉列表正确显示？有办法如何管理吗？

这里是按钮组手册页的链接,仅供参考我的意思. http://twitter.github.com/bootstrap/components.html#buttonGroups

Answer 1

BOOTSTRAP 4:

嵌套按钮组

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

BOOTSTRAP 3:

bootstrap 3.0的正确答案在这里:

嵌套按钮组

无需更改CSS:

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Answer 2

我将自定义" group-dropdown "类添加到包含我的下拉按钮的" btn-group "div中.通过这种方式,下拉列表的" 下拉切换 "可以被自定义CSS覆盖.

组中的位置由:first-child和:last-child处理

这是hack:http://jsfiddle.net/Dk7sw/6/(在CSS底部也可以使用LESS CODE)

CSS:

/*

Twitter Bootstrap CSS modifications for having dropdown menus in
buttons groups.
Dropdowns menus are well positionned, under their buttons.

LESS code at bottom

Kure2012.

*/
.btn-group.group-dropdown {
  margin: 0px;
  padding: 0px;
  margin-left: -1px;
}
.btn-group.group-dropdown .dropdown-toggle {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.btn-group.group-dropdown:first-child {
  margin: 0px;
  padding: 0px;
  margin-right: -1px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle {
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group.group-dropdown:first-child .dropdown-toggle.btn-large {
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-left-radius: 6px;
}
.btn-group.group-dropdown:last-child {
  margin: 0px;
  padding: 0px;
  margin-left: -1px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle {
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group.group-dropdown:last-child .dropdown-toggle.btn-large {
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  border-bottom-right-radius: 6px;
}

/* And the LESS Code :
.btn-group{
    &.group-dropdown{
        margin:0px;
        padding:0px;
        margin-left:-1px;
        .dropdown-toggle{
            .border-radius(0);
        }
        &:first-child{
            margin:0px;
            padding:0px;
            margin-right:-1px;
            .dropdown-toggle{
                .border-top-left-radius(4px);
                .border-bottom-left-radius(4px);
                &.btn-large{
                    .border-top-left-radius(6px);
                    .border-bottom-left-radius(6px);
                }
            }                
        }
        &:last-child{
            margin:0px;
            padding:0px;
            margin-left:-1px;
            .dropdown-toggle{
                .border-top-right-radius(4px);
                .border-bottom-right-radius(4px);
                &.btn-large{
                    .border-top-right-radius(6px);
                    .border-bottom-right-radius(6px);
                }
            }
        }
    }    
}

和HTML:

<!--

Custom HTML : add a "group-dropdown" class to the dropdown
"btn-group" div.
The "btn-group" div must wrap the whole button (button+submenu items), as specified in the bootstrap doc. This allows you to put several dropdowns in the same buttons group.

Works whatever their position in the button group is.

-->

<!---
Here starts the button group
-->
<div class="btn-group">
    <!--First dropdown : note the "group-dropdown" property -->
    <div class="btn-group group-dropdown">
        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Filter by">
            <i class="icon icon-filter"></i>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">All</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </div>

    <!-- Classic button -->
    <a href="#" class="btn btn-mini" title="New">
        <i class="icon-plus-sign"></i>
    </a>

    <!-- Classic button -->
    <a href="#" class="btn btn-mini" title="Import">
        <i class="icon-upload"></i>
    </a>

    <!-- Dropdown in the middle of the button group -->
    <div class="btn-group group-dropdown">
        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Export">
            <i class="icon icon-download"></i>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">.csv file</a></li>
            <li><a href="#">.json file</a></li>
            <li><a href="#">.ods file</a></li>
            <li><a href="#">.xml file</a></li>
            <li><a href="#">.sql file</a></li>
        </ul>
    </div>

    <!-- Dropdown at the end of the button group -->
    <div class="btn-group group-dropdown">
        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Another action">
            <i class="icon icon-home"></i>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Custom menu</a></li>
            <li><a href="#">Custom menu</a></li>
            <li><a href="#">Custom menu</a></li>
        </ul>
    </div>

</div>