Question

我有两个来自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>

Answer 1

有两种方法可以做到这一点。首先，您可以创建一个按钮组。由于您使用了两个div元素，因此它们都需要具有按钮组类。此方法在同一行上的按钮之间没有空格这是First Method ::

 <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>

第二种方法::

在第二种方法中，使用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>

Answer 2

试试这个：

.dropdown {
  display: inline-block;
}

Answer 3

看起来这对我有用，试一试： 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>

将2个下拉菜单放在同一行

3 个答案: