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

【问题标题】：How can I set a width of a dropdown in Bootstrap while keeping responsiveness?如何在保持响应能力的同时在 Bootstrap 中设置下拉菜单的宽度？
【发布时间】：2018-02-15 09:19:52
【问题描述】：

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

我想让下拉列表本身更大，同时在调整窗口大小时包含其中的所有图像。当我设置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 -->

【问题讨论】：

stackoverflow.com/questions/18590929/…

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

我认为这里不需要!important，因为它已经是内联css代码......据我了解，由于css读取过程，所有内联css都已被优先考虑。
@iMarkDesigns 是的，没错。但我认为课堂上可能没有“！important”。