BootStrap之包含下拉菜单的输入框

2018-11-04 11:47:57 深海幽声 阅读数 3696更多

本文链接：https://blog.csdn.net/qq_37844454/article/details/83714535

用法：

<div class="row col-md-5 text-center">
<div class="input-group"><!--保持内联，消除边框，类似于form-inline-->
<div class="input-group-btn"><!--不换行，与相邻元素内联，包含dropdown-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    请选择<span class="caret"></span>
</button>

<ul class="dropdown-menu">
    <li><a href="javascript:void(0);">宝贝</a></li>
    <li><a href="javascript:void(0);">店铺</a></li>
</ul>

</div>
<input type="text" class="form-control" placeholder="请输入关键词" />
<span class="input-group-btn"><!--不换行，与相邻元素内联-->
    <button class="btn btn-primary">搜索</button>
</span>

</div>

</div>

效果图：