Javascript 选择2引导调整大小问题

我正试图在我的html中使用multiple select2 select表单和引导。但是我在大小上有问题，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() {});

$（“.s2”）。选择2({
关闭选择：false
});
$（文档）.ready（函数（）{}）；

完整代码在此

要修复布局（宽度不正确），您需要将内容包装在

表单组中

：

<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>

标签
选择1
选择2

关于JS，我认为codeply存在一个问题，即复制html和JS并直接在codepen中引用脚本和链接。请参阅以获取示例。

若要修复布局（宽度不正确），您需要将内容包装在

表单组中

：

<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>

标签
选择1
选择2

---

关于JS，我认为codeply存在一个问题，即复制html和JS并直接在codepen中引用脚本和链接。请参阅以获取示例。

首先在选择框中添加：

在标题中添加此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>

---

首先在选择框中添加：

在标题中添加此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>

不工作。请检查链接中的完整代码。@Shawon0418我认为问题在于代码层。我几乎把它复制粘贴到我的代码笔中，它的工作原理在我的浏览器中也不起作用。在添加数据宽度：100%后，它现在开始工作。谢谢你的帮助，没用了。请检查链接中的完整代码。@Shawon0418我认为问题在于代码层。我几乎把它复制粘贴到我的代码笔中，它的工作原理在我的浏览器中也不起作用。在添加数据宽度：100%后，它现在开始工作。谢谢你的帮助。谢谢。它起作用了。我添加了JS和CSS，但没有使用数据宽度属性。谢谢，它起作用了。我添加了JS和CSS，但是没有使用数据宽度属性。对于这个线程来说太晚了，但是如果有人正在使用select2 from，请检查这个链接，它有设置控件宽度的方法。对于这个线程来说太晚了，但如果有人正在使用select2 from，请检查此链接，该链接具有设置控件宽度的方法。