选择输入不分组到其他输入

Question

基本上我遇到的问题是我试图将所有这三个输入分组，以便它是一个长连接形式。然而，我遇到的问题是，选择输入没有正确连接到表单的其余部分是否存在我做错的事情。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

     <div class="input-group">
             <div class="form-group">
                  <select class="form-control" id="sel1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                  </select>
              </div>

        <input type="text" class="form-control">
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-search" aria-hidden="true">
        </span></span>  

        </div>

＆＃13;

＆＃13;

＆＃13;

所以我遇到的问题与<select>有关，而我实际上想要达到的目的是让上述形式看起来与此类似;将第一个灰色区域作为选择，将第二个灰色区域作为搜索图标。

Answer 1

尝试使用Click Block Animation Block Click Block Click Block Click Block Click Block 组件

dropdown-menu

Answer 2

您还可以使用将<select>转换为类似引导程序的下拉列表的bootstrap-select library。

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group">
  <select class="selectpicker">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

  <input type="text" class="form-control" aria-label="...">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

＆＃13;

＆＃13;

＆＃13;