Question

我正在尝试使用bootstrap在我的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。

select2 bootstrap大小调整问题

2 个答案: