Html 引导4下拉列表与父项对齐

我有一个引导下拉列表作为输入组的一部分。如何将下拉菜单的宽度与家长的输入组对齐

 <div id="ddl_1" class="input-group">
   <input type="text" class="form-control ">

   <div class="input-group-append">
     <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
             aria-haspopup="true" aria-expanded="true" 
             data-toggle="dropdown" 
             data-boundary="viewport" 
             data-reference="parent" 
             data-target="#ddl_1">
     </button>
     <div class="dropdown-menu">
       <div class="dropdown-item">Name 0</div>
       <div class="dropdown-item">Name 1</div>
       <div class="dropdown-item">Name 2</div>
       <div class="dropdown-item">Name 3</div>
       <div class="dropdown-item">Name 4</div>
     </div>
     
   </div>
 </div><!-- end input group -->

名称0
名字1
名称2
名字3
名字4

注意，我使用的是

data boundary=“viewport”

，因为我在可滚动容器中使用它，它可能会溢出

您可以将“输入组”div的“静态位置”更改为“相对位置”。然后将“w-100”添加到“下拉菜单”div

名称0
名字1
名称2
名字3
名字4

---

当我使用data boudary=“viewport”时，bootstrap javascript会自动添加position static。通过明确地将其标记为相对位置，您违反了要求，即必须使容器溢出。

 <div id="ddl_1" class="input-group position-relative show">
   <input type="text" class="form-control ">

   <div class="input-group-append">
     <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
             aria-haspopup="true" aria-expanded="true" 
             data-toggle="dropdown" 
             data-boundary="viewport" 
             data-reference="parent" 
             data-target="#ddl_1">
     </button>
     <div class="dropdown-menu w-100">
       <div class="dropdown-item">Name 0</div>
       <div class="dropdown-item">Name 1</div>
       <div class="dropdown-item">Name 2</div>
       <div class="dropdown-item">Name 3</div>
       <div class="dropdown-item">Name 4</div>
     </div>
     
   </div>
 </div><!-- end input group -->