Question

我希望在更改浏览器窗口的分辨率时有动态下拉列表。

Check这个小提琴。

当我调整窗口大小时，我希望我的下拉宽度增加或缩短。

<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JavaScript</a></li>
 </ul>
  </div>
        </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
           <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
     <span class="caret"></span></button>
      <ul class="dropdown-menu">
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">JavaScript</a></li>
     </ul> 
      </div>
        </div>
           </div>
   </div>
  </div>
  </div>

PS：另外，我的下拉列表周围有一个边框，大小为280X35像素。

我将通过CSS添加为背景图片。

所以我希望图像的宽度能够同时增加

Answer 1

如果我理解正确，将background-size: cover;添加到背景图片应该可以解决问题。

Answer 2

这将使下拉列表部分遵循浏览器宽度

.dropdown-menu {
    background-image: url("http://i.imgur.com/oSHpSWq.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
}

编辑：好的，从阅读您的评论我认为这是您想要的行为（上面更新的CSS）。下拉列表的大小为浏览器宽度，backgorund-image大小为下拉列表的高度和宽度（非按比例缩放）

浏览器窗口调整大小时动态下拉宽度以及背景图像

2 个答案: