5

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

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

我正在使用引导程序 3。在下面的代码中，我有 3 个按钮，其中“菜单 2”按钮打开一个下拉菜单。我也希望“菜单 1”按钮打开菜单。但到目前为止，我的尝试都失败了。

当我尝试将按钮分组到一个 btn 组时，它与连接的搜索栏分开，这不是我想要的。有没有办法使用 input-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>
4

3 回答 3

10

我遇到了同样的问题，并找到了一个纯引导解决方案。通过将所有下拉按钮包装在单个input-group-btn div 中，然后将每个下拉按钮包装在 btn-group div 中，避免任何额外的 css“修复”。在单个输入组 div 中使用多个 input-group-btn div 会破坏样式，并且需要像另一个解决方案中提供的那样进行 css 修复。引导文档暗示了这一点。这是一个简单的示例来演示：

<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>
于 2016-05-03T11:43:59.907 回答
7

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

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

（可能还有其他更好的方法可以做到这一点）

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

于 2013-12-09T12:56:08.340 回答
0

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

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

您应该仔细查看 Bootsrap 文档。

于 2013-10-08T01:06:14.673 回答