twitter-bootstrap 使用引导程序 3 的输入组中的多个下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19049524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple dropdown menus in an input-group using bootstrap 3
提问by Asgher Qureshi
I am trying make a search bar which should look some thing like this:
我正在尝试制作一个搜索栏，它应该看起来像这样：
http://s22.postimg.org/ecaxmtj8x/search_bar.png
http://s22.postimg.org/ecaxmtj8x/search_bar.png
I am using bootstrap 3. In the code below I have 3 buttons, where the "menu 2" button opens a dropdown menu. I would like the "menu 1" button to open a menu too. But so far my attempts have failed.
我正在使用引导程序 3。在下面的代码中，我有 3 个按钮，其中“菜单 2”按钮打开一个下拉菜单。我也希望“菜单 1”按钮也能打开菜单。但到目前为止，我的尝试都失败了。
When I try to group the buttons into a btn-group, it seperates from the joined search bar, which is not what I want. Is there a way to have 2 menu's inside a div using the input-group class?
当我尝试将按钮分组到 btn-group 中时，它与加入的搜索栏分开，这不是我想要的。有没有办法使用输入组类在 div 中包含 2 个菜单？
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-primary" type="button">
test 1 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</div>
回答by scottiejibbs
I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a singleinput-group-btn div, then each drop down button wrap in a btn-group div. Using multiple input-group-btn divs in a single input-group div breaks the styling and requires css repairs as offered in another solution. The bootstrap doc hints at this. Here is a simple example to demonstrate:
我遇到了同样的问题，并找到了一个纯粹的引导程序解决方案。通过将所有下拉按钮包装在单个input-group-btn div 中，然后每个下拉按钮包装在 btn-group div 中，避免任何额外的 css“修复” 。在单个输入组 div 中使用多个 input-group-btn div 会破坏样式并需要另一种解决方案中提供的 css 修复。bootstrap 文档暗示了这一点。下面是一个简单的例子来演示：
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-a</span></button>
<ul class="dropdown-menu">
<li><a href="#">li-a-1</a></li>
<li><a href="#">li-a-2</a></li>
<li><a href="#">li-a-3</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-b</span></button>
<ul class="dropdown-menu">
<li><a href="#">li-b-1</a></li>
<li><a href="#">li-b-2</a></li>
<li><a href="#">li-b-3</a></li>
</ul>
</div>
</div>
<input class="form-control" type="text" placeholder="search">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</input>
</div>
回答by niranjan94
It's quite easy to do that. Though I employed a small hack to make it look proper (It may be done without that hack too I think ... Not too sure )
做到这一点很容易。虽然我使用了一个小技巧来使它看起来合适（我认为也可以在没有那个 hack 的情况下完成......不太确定）
jsFiddle Demo :http://jsfiddle.net/niranjan94/dgs25/
jsFiddle 演示：http : //jsfiddle.net/niranjan94/dgs25/
HTML:
HTML：
<div class="col-lg-6 visible-xs">
<br>
<form action="" method="get" role="search">
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search Advertisements">
<span class="input-group-btn">
<button class="btn btn-primary custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<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>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button 2 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<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>
</span>
</div>
</form>
</div>
CSS (Overriding default border-radius to make it look proper):
CSS（覆盖默认边框半径以使其看起来正确）：
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
(There mightbe other better ways to do this too)
（可能还有其他更好的方法来做到这一点）
That's it ... :) Hope it solves your problem .
就是这样... :) 希望它能解决您的问题。
回答by Giovanni Silveira
Well, for starters you havent set the data-toggle="dropdown"for button test 1
好吧，对于初学者来说，您还没有设置data-toggle="dropdown"for 按钮test 1
The link to the image you posted doesnt work, but you need to also set a div.input-group-btnto wrap those buttonand ul.
您发布的图像的链接不起作用，但您还需要设置 adiv.input-group-btn来包装这些button和ul。
You should take a closer look at Bootsrap documentation.
您应该仔细查看 Bootsrap 文档。
