Bootstrap 输入组

Question

我对网络开发有点陌生，我正在努力自学。我正在尝试制作一个带有下拉菜单的搜索栏，到目前为止我已经做到了，但最后一个按钮有问题，它将用作搜索按钮。它不固定在左侧，它只是漂浮在栏杆下方。

<div class="search">
      <div class="input-group">
               <div class="input-group-btn">
                 <button type="button" class="btn"><span class="fa-search"></span></button>
                  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                     Categories
                     <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 class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               <input type="text" class="form-control">
               <button type="button" class="btn-search"><span class="fa-search">
            </div><!-- /input-group -->
            </span></button>

          </div><!-- ...search -->

Answer 1

这就是您使用下拉菜单进行搜索的方式 - 您就快完成了..只需将 input 移到 ul

之后

   <div class="col-lg-5">
<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <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>
  </div><!-- /btn-group -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->

link 到 demo

Bootstrap 输入组

Bootstrap Input Groups

html

javascript

less

searchbar

twitter-bootstrap