twitter-bootstrap 将 2 个下拉菜单放在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29446555/
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
Place 2 dropdowns in the same line
提问by G4brym
I have this 2 dropdowns from bootstrap and i want to put them in the same row, i tryed to use the <div class="row">and the <div style="display: inline-block;">and it didn′t worked
我有这 2 个来自 bootstrap 的下拉菜单，我想将它们放在同一行中，我尝试使用<div class="row">和<div style="display: inline-block;">并且它没有用
<div class="row">
Ir Para:
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
//more dropdown content
</ul>
</div> de
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
//more dropdown content
</ul>
</div>
采纳答案by Legends
Look this works for me, try it : demo
看看这对我有用，试试看： 演示
<div class="dropdown pull-left">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fevereiro</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Outubro</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Novembro</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dezembro</a></li>
</ul>
</div>
</div>
<div class="dropdown pull-left">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2016</a></li>
</ul>
</div>
回答by kinshuk
There are two ways of doing this. First you can create a button group. Since you are using two div elements, they both will need to have button group class. This method will have no space between the buttons on the same line Here is the First Method ::
有两种方法可以做到这一点。首先，您可以创建一个按钮组。由于您使用了两个 div 元素，因此它们都需要具有按钮组类。此方法将在同一行的按钮之间没有空格这是第一种方法 ::
<div class="btn-group">
Ir Para:
<div class="dropdown btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
//more dropdown content
</ul>
</div> de
<div class="dropdown btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
//more dropdown content
</ul>
</div>
Second method ::
第二种方法::
In the second method, you specify the grid span each button takes using col--class. This method provides space between the buttons on the same line. Here is how it can be done::
在第二种方法中，您使用 col- -类指定每个按钮采用的网格跨度。此方法在同一行上的按钮之间提供空间。这是如何做到的：：
<div class="row">
<div class="col-md-2">
Ir Para:
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Janeiro
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Janeiro</a></li>
//more dropdown content
</ul>
</div> de
</div>
<div class="col-md-2">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2015</a></li>
//more dropdown content
</ul>
</div>
</div>
回答by Danko
Try this:
试试这个：
.dropdown {
display: inline-block;
}
