html - Bootstrap 3 输入、下拉列表、输入组中的按钮

Question

我必须制作输入、下拉列表和按钮，看起来无法在输入组中按此顺序制作。有什么想法吗？

下拉 |输入 |按钮(有效):

<div class="form-group">
    <div class="input-group">
        <div class="input-group-btn">
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    <span>Search By</span> <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#">1</a></li>
                     <li><a href="#">2</a></li>
                     <li><a href="#">3</a></li>
                 </ul>
            </div>
       </div>
       <input type="search" name="searchBy" id="searchBy" class="form-control" />
       <span class="input-group-btn">
           <button id="filter" class="btn btn-default" >
               <span class="glyphicon glyphicon-plus"></span>
           </button>
        </span>
    </div>
 </div>

https://jsfiddle.net/hvjv6fjc/

但我想要输入 |下拉 |按钮 并且有一些问题

https://jsfiddle.net/4aexouyf/

Answer 1

我能够解决这个问题。这是我的错误。

  <div class="form-group">
                      <div class="input-group">
                          <input type="search" name="searchBy" id="searchBy" class="form-control" />
                          <div class="input-group-btn">
                              <div class="btn-group">
                                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                      <span>Choose</span> <span class="caret"></span>
                                  </button>


                                  <ul class="dropdown-menu" role="menu">
                                      <li><a href="#">1</a></li>
                                      <li><a href="#">2</a></li>
                                      <li><a href="#">3</a></li>
                                  </ul>
                              </div>
                                <button id="filter" class="btn btn-default" >
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                          </div>
                      </div>
                </div>