select2引導大小問題

我想用bootstrap在我的html中使用多選select2選擇表單。但是我遇到了大小問題，select2框不能與網格一起工作，而且它還會擾亂下一個項目的大小。在HTMLselect2引導大小問題

<div class="select2-container col-md-11"> 
    <select class="form-control s2" id="complaint" multiple="multiple" name= 
    "complaint[]"> 
     <option value="bad_breath"> 
      Bad Breath 
     </option> 
     <option value="bleeding_gum"> 
      Bleeding Gum 
     </option> 
     <option value="swollen_gum"> 
      Swollen Gum 
     </option> 
     <option value="gum_pain"> 
      Gum Pain 
     </option> 
     <option value="loose_teeth"> 
      Loose Teeth 
     </option> 
     <option value="sensitive_teeth"> 
      Sensitive Teeth 
     </option> 
     <option value="darkened_teeth"> 
      Darkened Teeth 
     </option> 
     <option value="damaged_teeth"> 
      Damaged Teeth 
     </option> 
    </select> 
</div>

的JS

<script type="text/javascript"> 
$(".s2").select2({ 
    closeOnSelect: false 
}); 
$(document).ready(function() {});

全部代碼在這裏http://www.codeply.com/go/Ly1UHW2HT2

來源

2016-04-26 Shawon0418

首先添加在您的選擇框：<select data-width="100%"></select> 增加這個JS和CSS你頭：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

來源

2016-04-26 14:53:44

感謝它的工作。我添加了JS和CSS，但沒有使用data-width屬性。 – Shawon0418

固定佈局（寬度不正確的），你需要將這些內容包裝在一個form-group：

<div class="form-group"> 
    <label class="col-md-1 control-label" for="select">Label</label> 
    <div class="select2-container col-md-11"> 
     <select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%"> 
      <option value="o1">Option 1</option> 
      <option value="o2">Option 2</option> 
     </select> 
    </div> 
</div>

重新JS，我認爲有一個codeply作爲複製html的問題和JS，並直接在codepen作品中引用腳本和鏈接。一個例子見here。

來源

2016-04-26 14:19:41

不工作。請檢查鏈接中的完整代碼。 – Shawon0418

@ Shawon0418我認爲問題出在codeply上。我幾乎複製並粘貼到我的codepen [這裏]（http://codepen.io/alexander-holman/pen/XdPqMV）及其工作 –

它也沒有在我的瀏覽器中工作。它在添加數據寬度之後現在正在工作：100％。謝謝您的幫助。 – Shawon0418

select2引導大小問題

回答

相關問題