html - 我想允许在列表组中选择多个按钮
问题描述
这是我的代码,下拉菜单也不显示下拉项目。它不显示下拉项目。帮助我,这将非常有帮助。我还想允许多个按钮选择,包括更改我选择的每个按钮的颜色
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item:focus {
display: inline-block;
color:#fff;
background-color: #41AADA !important;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-check list-inline list-group-horizontal" data-toggle="list-group-item">
<button type="checkbox" id="btnGroupDrop1" type="button" class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2018
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">2017</a>
<a class="dropdown-item" href="#">2016</a>
</div>
<button type="checkbox" class="form-check list-group-item">Quater 1</button>
<button type="checkbox" class="form-check list-group-item">Quater 2</button>
<button type="checkbox" class="form-check list-group-item">Quater 3</button>
<button type="checkbox" class="form-check list-group-item">Quater 4</button>
</div>
解决方案
您可以尝试以下解决方案:
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item:focus {
background-color: #41AADA !important;
color:#fff;
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.form-check label {
padding:.75rem 1.25rem;
margin-bottom:0;
}
.form-check label input[type="checkbox"] {
opacity:0;
}
<!-- include the CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- include the JavaScript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- the HTML -->
<div class="form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<button type="checkbox" id="btnGroupDrop1" type="button" class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="buttons">
2018
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">2017</a>
<a class="dropdown-item" href="#">2016</a>
</div>
<label class="btn btn-light">
<input type="checkbox" class="form-check list-group-item">Quater 1
</label>
<label class="btn btn-light">
<input type="checkbox" class="form-check list-group-item">Quater 2
</label>
<label class="btn btn-light">
<input type="checkbox" class="form-check list-group-item">Quater 3
</label>
<label class="btn btn-light">
<input type="checkbox" class="form-check list-group-item">Quater 4
</label>
</div>
推荐阅读
- excel - 是否有用于测量机器性能的 Excel VBA 代码示例?
- sql-server - 在这种 SQL 案例中如何尝试转换
- swift - 如何从屏幕顶部更改 CALayer 框架 origin.y
- javascript - 在后台上传文件
- javascript - 如何访问对象内部的数据?
- reactjs - ReactHooks :调用 useEffect 的回调函数的选项,具体取决于触发 useEffect 的原因(在渲染或状态更新时)
- sql - 从 SELECT 查询中的临时表检查递归关系
- c - 增加超过 rmem_max 的套接字接收缓冲区大小
- php - PHP cURL OAuth v1.0
- java - 如何使用自定义注解将方法添加到 java 类