【发布时间】：2019-04-06 15:26:53
【问题描述】：
在引导程序panel 中，我有一个form，我在其中使用select2 进行选择输入。
问题是，当我将panel 定义为默认关闭（通过从class="panel-collapse collapse" 中删除in）时，select2 输入的宽度越来越小！
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> closed by default
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> open by default
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>但是，如果我将 in 添加到类中，则 select2 输入的宽度将跟随其父列！
我不明白为什么会这样……有什么办法可以解决它吗？
【问题讨论】：
标签： css twitter-bootstrap twitter-bootstrap-3 jquery-select2