html - 如何在保持响应能力的同时在 Bootstrap 中设置下拉菜单的宽度？

Question

我有一个非常简单的下拉菜单，其中包含图像(两行三列，每列包含一个图像)。

我想让下拉菜单本身变大，同时在调整窗口大小时包含其中的所有图像。当我设置 width 或 height 时，当我缩小窗口时图像会脱离下拉窗口。

有没有一种好的方法可以调整下拉菜单的大小，使其变大，并为其中的图像添加一些漂亮的填充，同时保持响应能力？

         <div class="btn-group">
            <button type="button" id="menuIcon" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu dropdown-menu-right">
               <div class="row">
                  <div class="col-md-4">
                     <img src="img1.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img2svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img3.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4">
                     <img src="img4.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img5.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img6.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
               </div>
            </div> <!-- Dropdown-->
         </div> <!-- Btn group -->

Answer 1

<div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
     <div class="dropdown" style="width:100%!important" >
       <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button
       </button>
       <div class="dropdown-menu" style="width:100%!important" 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>
</div>