select2引导程序大小调整问题

Question

我正在尝试在带有引导程序的html中使用多个select2选择表单。 但我在调整大小时遇到​​问题，select2框不适用于网格，而且还会使下一项的大小变乱。 HTML

<div class="select2-container col-md-11">
    <select class="form-control s2" id="complaint" multiple="multiple" name=
    "complaint[]">
        <option value="bad_breath">
            Bad Breath
        </option>
        <option value="bleeding_gum">
            Bleeding Gum
        </option>
        <option value="swollen_gum">
            Swollen Gum
        </option>
        <option value="gum_pain">
            Gum Pain
        </option>
        <option value="loose_teeth">
            Loose Teeth
        </option>
        <option value="sensitive_teeth">
            Sensitive Teeth
        </option>
        <option value="darkened_teeth">
            Darkened Teeth
        </option>
        <option value="damaged_teeth">
            Damaged Teeth
        </option>
    </select>
</div>

JS

<script type="text/javascript">
$(".s2").select2({
    closeOnSelect: false
});
$(document).ready(function() {});

完整代码在这里http://www.codeply.com/go/Ly1UHW2HT2

Answer 1

首先在您的选择框中添加： <select data-width="100%"></select>在您的标头中添加此JS和CSS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

Answer 2

要修复布局（宽度不正确），您需要将内容包装在一个form-group ：

<div class="form-group">
    <label class="col-md-1 control-label" for="select">Label</label>
    <div class="select2-container col-md-11">
       <select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
            <option value="o1">Option 1</option>
            <option value="o2">Option 2</option>
        </select>
    </div>
</div>

关于JS，我认为codeply存在问题，因为复制html和js并直接在codepen工作中引用脚本和链接。 请参阅此处的示例。