Bootstrap3和Select2樣式問題

我在使用Select2和Bootstrap 3時遇到了一些樣式問題。我發現了關於Select2 Bootstrap 3 CSS的所有信息，但我無法使其正常工作。Bootstrap3和Select2樣式問題

This是它的樣子。

正如你可以看到它太寬，搜索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>

來源

2015-09-03 Ciamician

只是擡起頭來，您正在使用不再支持的Select2版本。至少兩歲，如果不是更多。 –

再過幾個小時，它看起來像我解決了我的大部分問題：

固定寬度通過添加一個width屬性的JS代碼：

：

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

通過添加一個空的選項，我選擇固定佔位符

仍然無法讓搜索字形顯示出來。

來源

2015-09-03 08:34:01 Ciamician

Bootstrap3和Select2樣式問題

回答

相關問題