当被选中的下拉菜单最初被隐藏的Bootstrap 3手风琴中时,下拉菜单的宽度接近零.扩展后,它看起来像这样：
而我期望它看起来像这样：
当面板崩溃崩溃div没有在类中时,会出现问题,有效地指示它最初被折叠.以下是重现此问题的代码：
$(document).ready(function() {
$('select').chosen();
});
.panel-heading { cursor: pointer; }
body { padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapSEOne">
Expand me to show the issue!
</h4>
</div>
<div id="collapSEOne" class="panel-collapse collapse">
<div class="panel-body form-inline">
<p>This select has a near-width zero:</p>
<select class="form-control">
<option>Short</option>
<option>Longer option</option>
<option>The longest option of them all</option>
</select>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title">
Already expanded / how it <em>should</em> be
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body form-inline">
<p>This panel is initially visible and <em>does</em> have correct width for the select Box:</p>
<select class="form-control">
<option>Short</option>
<option>Longer option</option>
<option>The longest option of them all</option>
</select>
</div>
</div>
</div>
</div>
我可以做些什么来防止这种情况发生？调用选择为.chosen({width：’90％’}),即具有硬编码宽度的工作,但不令人满意(我想在我的样式表中使用或使用Bootstrap).唯一的解决方案似乎是钩住扩展事件并强制选择更新,但这也是一种解决方法.
最好我有一行CSS来解决这个问题,或者知道这是否可能是(组合)工具中的错误？
解决方法
原因：
选择当DOM准备好时计算并分配宽度,之后模拟下拉菜单的初始宽度为零.
解：
将以下内容添加到CSS中,以便下拉列表具有初始宽度：
.chosen-container.chosen-container-single {
width: 300px !important; /* or any value that fits your needs */
}
！的重要部分是因为选择添加了一个宽度为0的内联样式;对于元素本身而言,你需要重写特定性！