我想允许在“列表"组中选择多个按钮 [英] I want to allow multiple buttons to be selected in List group

问题描述

这是我的代码，下拉菜单也不显示下拉项.它不会显示下拉菜单项.请帮帮我，这将非常有帮助.我也想允许按钮的多个选择，包括更改我选择的每个按钮的颜色

This is my Code and also dropdown menu is not displaying dropdown items. It does not display dropdown items.Help me with this , that would be very helpful. Also i want to , allow multiple selection of the buttons, that includes, changing the color of each button that i select

 .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>

推荐答案

您可以尝试以下解决方案:

You can try the following solution:

.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>

这篇关于我想允许在“列表"组中选择多个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！