Bootstrap 4下拉对齐到父级

Question

我有一个引导下拉菜单作为输入组的一部分。如何将下拉菜单的宽度与父级的输入组对齐？

 <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 -->

请注意，我使用 data-boundary="viewport" 是因为我在可滚动容器中使用它，它可能会溢出。

https://codepen.io/Lieroo/pen/JjKadpa

Answer 1

您可以将“input-group”div 的“position-static”更改为“position-relative”。然后将“w-100”添加到“下拉菜单”div。

 <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 -->

https://codepen.io/callmesupercookie/pen/MWeqaeX