我想允许在列表组中选择多个按钮

时间：2018-06-18 08:32:28

标签： html css angular bootstrap-4

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

＆＃13;
＆＃13; 
 .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;
    
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

尝试使用bootstrap 4的脚本/链接 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

使用display:flex水平对象 

.warp{
display:flex}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <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"> 
    <div class="warp">
            <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>
</div>

相关问题
最新问题