将下拉菜单宽度与父输入框对齐

Question

我有一个输入框，其下拉按钮位于rigth上（引导程序4）。单击按钮后，将显示一个下拉菜单。在菜单中，我有一个带表的Angular组件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<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>

<div *ngIf="isAdmin" class="form-row">
  <div class="form-group col">
    <label for="userSite">Site</label>
    <div class="input-group">
      <input type="text" id="userSite" name="userSite" class="form-control form-control-sm" readonly [ngModel]="userFilter.siteDescription || ''" #userSite="ngModel"
        aria-label="Select the Site for the filter">
      <div class="input-group-btn">
        <div class="dropdown">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <div class="dropdown-menu dropdown-menu-right">
            <sites-list-management [showView]="false" [(user)]="userFilter"></sites-list-management>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item text-center" style="background-color: rgba(0, 0, 0, 0.05); cursor: pointer;" (click)="onSiteSelect(-1);">Remove selection</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

打印屏幕：

如何将下拉菜单宽度设置为等于输入+按钮一？

赞：

环境：

• 角度6
• 引导程序4

谢谢

Answer 1

在position-static div上添加.dropdown，在w-100 div上添加dropdown-menu dropdown-menu-right类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<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>
<div *ngIf="isAdmin" class="form-row">
  <div class="form-group col">
    <label for="userSite">Site</label>
    <div class="input-group">
      <input type="text" id="userSite" name="userSite" class="form-control form-control-sm" readonly [ngModel]="userFilter.siteDescription || ''" #userSite="ngModel" aria-label="Select the Site for the filter">
      <div class="input-group-btn">
        <div class="dropdown position-static">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select
      </button>
          <div class="dropdown-menu dropdown-menu-right w-100">
            <sites-list-management [showView]="false" [(user)]="userFilter"></sites-list-management>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item text-center" style="background-color: rgba(0, 0, 0, 0.05); cursor: pointer;" (click)="onSiteSelect(-1);">Remove selection</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>