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

Question

我正在尝试制作一个应该看起来像这样的搜索栏:

http://s22.postimg.org/ecaxmtj8x/search_bar.png

我正在使用bootstrap 3.在下面的代码中我有3个按钮,其中"menu 2"按钮打开一个下拉菜单.我想"菜单1"按钮也可以打开菜单.但到目前为止,我的尝试都失败了.

当我尝试将按钮分组到一个btn组时,它会从联接的搜索栏中分离出来,这不是我想要的.有没有办法使用输入组类在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&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>

Answer 1

我遇到了同样的问题,发现了一个纯粹的bootstrap解决方案.通过将所有下拉按钮包装在单个 input-group-btn div中,然后将每个下拉按钮包装在btn-group div中,避免任何额外的css"修复" .在单个输入组div中使用多个input-group-btn div会破坏样式并需要另一个解决方案中提供的css修复.bootstrap doc暗示了这一点.这是一个简单的例子来演示:

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

Answer 2

这很容易做到.虽然我采用了一个小小的黑客来让它看起来很合适(也可以在没有那个黑客的情况下完成我认为......不太确定)

jsFiddle演示: http ://jsfiddle.net/niranjan94/dgs25/

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(覆盖默认的border-radius以使其看起来正确):

.custom{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

(也可能有其他更好的方法来做到这一点)

就是这样...... :)希望它能解决你的问题.

Answer 3

好吧，对于初学者来说，你还没有设置data-toggle="dropdown"for 按钮test 1

您发布的图像的链接不起作用，但您还需要设置 adiv.input-group-btn来包装这些button和ul。

您应该仔细查看 Bootsrap 文档。