我对网络开发有点陌生,我正在尝试自学。我正在尝试制作一个带有下拉菜单的搜索栏,到目前为止我已经做到了,但是我对最后一个按钮有问题,它将用作搜索按钮。它没有固定在左侧,而是漂浮在栏下方。
<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 -->
最佳答案
这就是您使用下拉菜单进行搜索的方式 - 您就快到了..只需将 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 -->
链接到demo
关于javascript - Bootstrap 输入组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30325657/