Twitter bootstrap 如何创建一个按钮组，其中一个按钮具有下拉菜单？

如何创建一个按钮组，其中一个按钮具有下拉菜单？我这样问是因为在这种情况下，菜单不会出现在按钮下方/下方，而是出现在页面左边框处。如果我删除组按钮类（class=“btn group”）（我得到独立按钮），下拉列表是否正确显示？有没有办法管理这件事

这里是按钮组手册页面的链接，仅供参考。

---

在bootstrap.css之后添加：

.btn-group > .dropdown-toggle {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    margin-right: -1px;
    }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle:nth-last-child(2) {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; }

我在包装我的下拉按钮的“btn group”div中添加了一个自定义的“group dropdown”类。 通过这种方式，下拉菜单的“下拉切换”可以被自定义CSS覆盖

组中的位置由：第一个孩子和：最后一个孩子处理

这里是黑客：（CSS底部可用的代码也较少）

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>

引导程序4：

1.
2.
下拉列表

引导程序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>

1.
2.
下拉列表

这是上面链接中的代码：

<style>
.btn-custom-toolbar > .btn-group {
margin-left: 0px;
margin-right: 0px;
}
.btn-custom-toolbar > .btn-group > .btn, .btn-custom-toolbar > .btn-group >             .dropdown-toggle
{
 -webkit-border-radius: 0px;
 border-radius: 0px;
 -moz-border-radius: 0px;
 margin-left: -1px;
}
.btn-custom-toolbar > .btn-group:first-child > .btn:first-child {
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-left-radius: 4px;
 -webkit-border-top-left-radius: 4px;
 border-top-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -moz-border-radius-topleft: 4px; 
}
.btn-custom-toolbar > .btn-group:last-child > .btn {
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-right-radius: 4px;
 -webkit-border-top-right-radius: 4px;
 border-top-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -moz-border-radius-topright: 4px; 
}
</style>
 <body style="padding: 30px;"
 <h1>Version with sub btns</h1>
 <div class="btn-toolbar btn-custom-toolbar">
 <div class="btn-group">
 <button class="btn btn-cust-first">Dropdown 1</button>
 <button class="btn dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-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>
 </div>
 <div class="btn-group">
 <button class="btn">Button 1</button>
 </div>
 <div class="btn-group">
 <button class="btn">Dropdown 1</button>
 <button class="btn dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-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>
 </div>
 <div class="btn-group">
 <button class="btn">Dropdown 3</button>
 <button class="btn dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-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>
 </div>
 <div class="btn-group">
 <button class="btn dropdown-toggle" data-toggle="dropdown">
 Dropdown 3
 <span class="caret"></span>
 </button>
 <ul class="dropdown-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>
 </div>
 </div>
 </body>

.btn自定义工具栏>.btn组{
左边距：0px；
右边距：0px；
}
.btn自定义工具栏>.btn组>.btn、.btn自定义工具栏>.btn组>。下拉切换
{
-webkit边界半径：0px；
边界半径：0px；
-moz边界半径：0px；
左边距：-1px；
}
.btn自定义工具栏>.btn组：第一个子项>.btn:第一个子项{
-webkit边框左下半径：4px；
边框左下半径：4px；
-webkit边框左上半径：4px；
边框左上半径：4px；
-moz边框半径左下角：4px；
-左上角moz边界半径：4px；
}
.btn自定义工具栏>.btn组：最后一个子项>.btn{
-webkit边框右下半径：4px；
边框右下半径：4px；
-webkit边框右上角半径：4px；
边框右上角半径：4px；
-moz边框半径右下角：4px；
-moz边框半径右上角：4px；
}
这个4线解决方案对我来说是最干净的：

.btn-group > *:not(:first-child),
.btn-group > *:not(:first-child) .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

为什么你想要一个按钮组只有一个按钮？有更多的按钮，但只有一个是下拉菜单…啊，好的。你能给你的问题添加一些代码吗？我只是在我的实际引导项目中快速地尝试了一下，效果很好。你解决过这个问题吗？我也看到了同样的效果，但似乎没有多少阅读或重新排列标记来解决这个问题？您可能希望在下拉切换中添加1px的负边距，否则按钮之间会有一个双边框：这很好。在一个组中启用多个下拉列表会很好。是的，这是3.0的正确答案，只需将您的下拉列表包装在一个子btn组中即可。@peter添加了bootstrap 4部分并替换了bootstrap 3断开的链接
.btn-group > *:not(:first-child),
.btn-group > *:not(:first-child) .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}