输入组中的多个下拉菜单使用bootstrap 3

I am trying make a search bar which should look some thing like this:

我正在尝试做一个搜索栏，应该是这样的:

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.

我正在使用bootstrap 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组中时，它会从加入的搜索栏中分离出来，这不是我想要的。是否有一种方法可以使用input-group类在div中包含两个菜单?

<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&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            test 2&nbsp;&nbsp;<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>

3 个解决方案

#1

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 )

这很容易做到。虽然我用了一个小技巧使它看起来很合适(我认为没有这个技巧也可以做到……)不太确定)

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 might be other better ways to do this too)

(也许还有其他更好的方法)

That's it ... :) Hope it solves your problem .

就是这样……希望它能解决你的问题。

#2

I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a single input-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:

我遇到了同样的问题，找到了一个纯引导解决方案。避免任何额外的css“修复”，方法是将所有的下拉按钮封装在一个输入组btn div中，然后将每个下拉按钮封装在一个btn组div中。引导文档暗示了这一点。这里有一个简单的例子来说明:

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

#3

Well, for starters you havent set the data-toggle="dropdown" for button test 1

对于初学者来说，您还没有为按钮测试1设置data-toggle="dropdown"

The link to the image you posted doesnt work, but you need to also set a div.input-group-btn to wrap those button and ul.

你发布的图片的链接是无效的，但是你还需要设置一个div.input-group-btn来包装这些按钮和ul。

You should take a closer look at Bootsrap documentation.

您应该仔细查看Bootsrap文档。

#1