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>

Answer 2

HTML

   <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 dropdown-button" 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>
        <span class="input-group-btn">
               <button id="filter" class="btn btn-default" >
                   <span class="glyphicon glyphicon-plus"></span>
        </button>
        </span>
      </div>
    </div>

添加自定义css类 .dropdown-button

<强>的CSS

.dropdown-button {
  border-left: 0;
  border-radius: 0;
}

我更新了这个代码段，请检查一下。

https://jsfiddle.net/4aexouyf/3/

Bootstrap 3输入，下拉列表，输入组内的按钮

2 个答案: