Question

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

Answer 1

再过几个小时，看起来我解决了大部分问题：

通过向JS代码添加width属性来修复宽度：

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

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

<option></option>

仍然无法让搜索字形显示出来。

Bootstrap3和Select2样式问题

1 个答案: