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>