5

次のような検索バーを作成しようとしています。

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

私はブートストラップ 3 を使用しています。以下のコードには 3 つのボタンがあり、「メニュー 2」ボタンでドロップダウン メニューが開きます。「メニュー1」ボタンでもメニューを開いてほしい。しかし、これまでのところ、私の試みは失敗しています。

ボタンを btn-group にグループ化しようとすると、結合された検索バーから分離されますが、これは私が望んでいるものではありません。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

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（デフォルトのborder-radiusをオーバーライドして適切に見せる）：

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

（これを行う他の良い方法もあるかもしれません）

それだけです... :) 問題が解決することを願っています。

于 2013-12-09T12:56:08.340 に答える