当选择的下拉菜单位于 Bootstrap 3 手风琴内部时最初隐藏，那么下拉菜单的宽度接近于零。展开后如下所示：
而我希望它看起来像这样：
当panel-collapse collapse div没有in类，有效地表明它最初已经崩溃。这是重现此问题的代码：
$(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 来解决这个问题，或者知道这是否可能是工具（组合）中的错误？
Reason:
Chosen 在 DOM 准备好时计算并分配宽度，在此之前模拟下拉列表的初始宽度为零。
解决方案：
将以下内容添加到 CSS 中，以便下拉菜单具有初始宽度：
.chosen-container.chosen-container-single {
width: 300px !important; /* or any value that fits your needs */
}
The !important部分是因为选择添加了内联样式width: 0;到元素本身，您需要使用以下命令覆盖特异性!important.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
