select2 bootstrap 大小问题

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 作品中引用脚本和链接的问题。示例见here。