Question

我有一个非常简单的下拉菜单，包含图像（两行，三列，每列包含一个图像）。

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

是否有一种很好的方法可以调整下拉大小，使其更大，并在保持响应性的同时为其中的图像添加一些漂亮的填充？

＆＃13;

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

＆＃13;

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>

如何在保持响应性的同时在Bootstrap中设置下拉列表的宽度？

1 个答案: