select2 Bootstrap Sizing Problem

Question

Ich versuche, ein Multiple select2 select Formular in meinem HTML mit Bootstrap zu verwenden. Aber ich habe Probleme mit der Größeneinstellung, die select2-Box arbeitet nicht mit dem Raster, und es gurblert auch die Größe des nächsten Elements. Die html

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

Die JS

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

Voll Code hier http://www.codeply.com/go/Ly1UHW2HT2

Answer 1

Zuerst in Ihrer Auswahlbox hinzufügen: <select data-width="100%"></select> hinzufügen Dieses JS und CSS in Sie Header:

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

Answer 2

das Layout (Breite nicht korrekt) Sie den Inhalt in einem form-group wickeln müssen zu beheben:

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

Re der JS, ich denke, es gibt ein Problem mit Codeply als Kopieren der HTML und js und referenzieren die Skripte und Links direkt in Codepen funktioniert. Ein Beispiel finden Sie in here.