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>

Answer 2

对我有用。请参见下面的可运行代码段。

.dropdown-toggle::after {
  display: none !important;
}

p1:before {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

.custom-carets {
  border-right: 1px solid #007BFF;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<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 custom-carets">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    HH
    <p1></p1>
  </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 custom-carets">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    MM
     <p1></p1>
  </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
     <p1></p1>
  </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>