Question

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

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

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

当我尝试将按钮分组到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&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

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

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（覆盖默认边框半径以使其看起来正常）：

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

（可能也是其他更好的方法）

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

Answer 2

我遇到了同样的问题，发现了一个纯粹的bootstrap解决方案。通过在单个输入组-btn div中包装所有下拉按钮来避免任何额外的css“修复”，然后每个下拉按钮包装在btn-group div中。在单个输入组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 3

嗯，对于初学者，你没有为按钮data-toggle="dropdown"

设置test 1

您发布的图片的链接无效，但您还需要设置div.input-group-btn以包裹button和ul。

您应该仔细查看Bootsrap文档。

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

3 个答案: