我有一个非常简单的下拉菜单,其中包含图像(两行三列,每列包含一个图像)。
我想让下拉菜单本身变大,同时在调整窗口大小时包含其中的所有图像。当我设置 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 -->
最佳答案
<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>
关于html - 如何在保持响应能力的同时在 Bootstrap 中设置下拉菜单的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46082742/