html - 选择不分组到其他输入的输入

Question

基本上，我遇到的问题是我试图将所有这三个输入分组，以便它成为一个长连接形式。然而，我遇到的问题是选择输入没有正确加入表单的其余部分，是不是我做错了什么。

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

所以我遇到的问题与 <select> 有关基本上我想要实现的是让上面的表格看起来与此相似；第一个灰色区域是选择图标，第二个灰色区域是搜索图标。

Answer 1

尝试使用 dropdown-menu 组件

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
    </ul>
  </div>
  <input type="text" class="form-control" aria-label="...">
  <span class="input-group-addon">
        <span class="glyphicon glyphicon-search" aria-hidden="true">
        </span></span>
</div>