Bootstrap3和Select2样式问题

Question

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

这就是它的样子。

如您所见，它太宽了，搜索glyphicon似乎没有出现，并且占位符也没有显示。

这是我的代码的样子：

<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代码来固定宽度：

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

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

<option></option>

仍然无法获得搜索字形显示。

Bootstrap3和Select2样式问题

问题描述

1 个解决方案

解决方案1
0 2015-09-03 08:34:01

Bootstrap3和Select2样式问题

问题描述

1 个解决方案

解决方案1 0 2015-09-03 08:34:01

解决方案1
0 2015-09-03 08:34:01