Bootstrap3 和 Select2 样式问题答案

【问题标题】：Bootstrap3 and Select2 styling issuesBootstrap3 和 Select2 样式问题
【发布时间】：2015-09-03 05:58:33
【问题描述】：

在将 Select2 与 Bootstrap 3 结合使用时，我遇到了一些样式问题。我发现了所有关于 Select2 Bootstrap 3 CSS 的信息，但我无法让它正常工作。

This 是这样的。

您可以看到它太宽，搜索字形图标似乎没有出现，占位符也没有显示。

这就是我的代码的样子：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="~/Content/select2.css">
    <link rel="stylesheet" href="~/Content/select2-bootstrap.css">
    <link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" />

    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<br />
<form class="form-horizontal">
    <fieldset>
        <legend>General data</legend>
        <div class="form-group">
            <label for="inputRequester" class="col-lg-2 control-label">Requester</label>
            <div class="col-lg-10">
                <input type="text" class="form-control input-sm" id="inputRequester" placeholder="Requester" value="@System.Environment.UserName" readonly>
            </div>
        </div>
        <div class="form-group">
            <label for="datepickerino" class="col-lg-2 control-label">Delivery date</label>
            <div class="col-lg-10">
                <input type="text" class="form-control input-sm" id="datepickerino">
            </div>
        </div>
        <div class="form-group">
            <label for="inputProject" class="col-lg-2 control-label">State</label>
            <div class="col-sm-4">
                <select id="inputProject" class="form-control input-sm select2">
                    <option value="AL">Alabama</option>
                    ...
                </select>
                </div>
            </div>
            ...
    </fieldset>
</form>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
<script>
    $( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6} );
</script>

【问题讨论】：

请注意，您使用的 Select2 版本不再受支持。它至少有两年了，如果不是更多的话。

标签： html css twitter-bootstrap jquery-select2

【解决方案1】：

又过了几个小时，我似乎解决了大部分问题：

通过在 JS 代码中添加宽度属性来修复宽度：

$(".select2").select2({
    placeholder: 'Select a country',
    maximumSelectionSize: 6,
    width: 'resolve'
});

通过在我的选择中添加一个空选项来修复占位符：

<option></option>

仍然无法显示搜索字形图标。

【讨论】：