Bootstrap3和Select2樣式問題
[英]Bootstrap3 and Select2 styling issues
問題描述
將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>
1 個解決方案
解決方案1
0 2015-09-03 08:34:01
再過幾個小時，看來我解決了大多數問題：
通過將寬度屬性添加到JS代碼來固定寬度：
$(".select2").select2({
placeholder: 'Select a country',
maximumSelectionSize: 6,
width: 'resolve'
});
通過在我的選擇中添加一個空選項來修復占位符：
<option></option>
仍然無法獲得搜索字形顯示。
Bootstrap 4 的 Select2 樣式錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.