Question

我想像Gmail一样创建一个多检查下拉列表。像这样：

我所取得的成就是：

它看起来并不好。

有人可以建议我如何能够接近上面的图像吗？

更新：

为我的多检查下拉列表添加代码。

<th >
                            <div class="dropdown text-center">
                                    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
                                      <a class="dropdown-item" href="#" (click)="selectAll(true)">SelectAll</a>
                                      <a class="dropdown-item" href="#" (click)="selectAll(false)">None</a>
                                    </div>
                                  </div>
                        </th>

Answer 1

＆＃13;

.btn.dropdown-toggle {
   background: #e2e4e6;
   border: 1px solid #c3c3c3;
   color: #949494;
   padding: 3px 20px;
   border-radius: 0;
}

.btn.dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<th >
  <div class="dropdown text-center" role="button">
    <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
      <a class="dropdown-item" href="#" (click)="selectAll(true)"> SelectAll
      </a>
      <a class="dropdown-item" href="#" (click)="selectAll(false)">None
      </a>
     </div>
  </div>
</th>

＆＃13;

如何使用html css和bootstrap4创建multiheck下拉列表？

1 个答案: