html - Bootstrap 输入组选择字段、文本字段和搜索字段

Question

我想建立类似于亚马逊网站的搜索栏。

选择输入字段，然后是输入字段，然后是搜索按钮。

这是我目前得到的:

问题是 button1 下拉菜单不是选择输入字段，如果我更改为输入字段，一切都会中断。

bootstrap 站点中的示例不显示带有输入字段选择但下拉菜单的组。

我的代码

 <div class="input-group input-group-lg">

        <input type="text" name="query" class="form-control" placeholder="Search this site" />
        <span class="input-group-btn">

          <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>
        <button class="btn btn-primary" type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
    </span>


        </div>

css - 删除中心输入字段或按钮的曲线半径

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

Answer 1

请看我的演示。如果你想添加你的样式，然后将类添加到组件以更改那里的样式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="col-md-6">
<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">Apps & Games <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
</div>
</div>
</div>