javascript - 如何使用引导程序制作并排下拉菜单?
问题描述
我正在尝试为我的表单输入生日,其中将包含三个下拉菜单。第一个将有日,然后是月,然后是年。
<div class="dropdown" style="position:inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
这是 bootstrap 网站上的一个下拉菜单的代码。
解决方案
You can use btn-group
class to make your button menu side by side.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
推荐阅读
- python - Python 'ascii' 编解码器无法对位置 151 中的字符 u'\u2013' 进行编码:序数不在范围内(128)AWS Glue
- r - 创建一个基本的 R 骰子滚动函数来对骰子值求和
- java - rsps在哪里可以找到背景图片
- python - Python字典重构
- android - Flutter Android 资源链接失败,无法应用插件 [id 'kotlin-android']
- php - 如何从 NOAA 数据创建关联数组
- salesforce - 重启 CometD Bayeux 客户端的正确方法是什么
- javascript - 无法从 Discord JS 中的事件侦听器访问我的扩展客户端
- vue.js - 是否建议在父组件或子组件中设置 Vue 组件的样式?
- fish - TIDE 内的鱼壳 git_prompt