html - Bootstrap 中的组下拉列表

Question

我正在尝试在 HTML CSS 和 Bootstrap 中实现附加设计，但我无法完美地完成它。我遇到了按钮组，但没有像下拉组之类的东西。谁能帮帮我。

我想要的:

HTML

<div class="btn-group form-group mt-3 col-sm-12 ml-4" role="group">
  <span class="row">
   <button type="button" style="background: #579ffb;color: white; height: 2.3em;" class="btn col-sm-3">From</button>
   <select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " name="hours" style="border-color: #579ffb;margin-left: -0.7%;color: #b6b7b7; height: 2.3em;">

   <option *ngFor="let time of times" [value]="time" (ngModelChange)="onChange($event)">
   {{time}}
   </option> //prints 1 to 12 in dropdown
   </select>

   <select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " [(ngModel)]="from_minutes" name="minutes" style="
   border-color: #579ffb;
   margin-left: -0.7%;
   color: #b6b7b7;
   height: 2.3em;
   ">
   <option *ngFor="let hour of hours" [value]="hour" (ngModelChange)="onChange($event)">
   {{time}}
   </option> //prints 00  to 59 in dropdown
   </select>

   <select class="form-control col-lg-3 col-md-3 col-sm-3 col-3 " [(ngModel)]="from_time" name="from_time" style="
   border-color: #579ffb;
   margin-left: -0.7%;
   color: #b6b7b7;
   height: 2.3em;
   ">
   <option [ngValue]="AM">AM</option>
   <option [ngValue]="PM">PM</option>
   </select>
</span>
</div>

Answer 1

只需使用相同的按钮组，但放入下拉按钮而不是常规按钮。

下拉菜单:https://getbootstrap.com/docs/4.0/components/dropdowns/

按钮组:https://getbootstrap.com/docs/4.1/components/button-group/

边框:https://getbootstrap.com/docs/4.0/utilities/borders/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group border border-primary rounded" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">From</button>
  <div class="dropdown">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    HH
  </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="dropdown">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    MM
  </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="dropdown">
  <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    AM
  </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>