css - 搜索框 + 下拉菜单 + 搜索按钮
问题描述
我需要创建一个包含搜索字段、下拉列表和搜索按钮的搜索栏。我已经阅读了 Bootstrap 4 上的材料,但我无法通过它们在那里展示的内容来实现我所需要的。另外,我将如何添加“向下箭头”?谢谢。
解决方案
这段代码是您可以开始实现您的要求的地方。
<div class="container">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
在 JsFiddle 中查看结果。
推荐阅读
- azure - Azure WAF 403 响应
- css - 为 ID 创建别名
- firewall - 连接到后面的服务器
- c# - 当字符串包含空值(“NaN”)时,JsonConvert.DeserializeObject 失败
- javascript - vuex 中 { dispatch, commit } 的类型是什么?
- oracle-apex - Apex 应用程序文本项字段的电子邮件验证
- ruby - 无法在本地运行 rails 应用程序
- php - 是否可以询问 PDO 以确定查询当前是否处于活动状态?
- excel - Excel 条件格式行背景,使用现有手动格式跳过单元格
- ios - 可选原始类型的字符串初始值设定项:Int? 双倍的?漂浮?ETC