select2ブートストラップサイジング問題

Question

私はhtmlのブートストラップで複数のselect2選択フォームを使用しようとしています。しかし、私はサイジングに問題がある、select2ボックスはグリッドで動作していない、それはまた、次のアイテムのサイズを混乱させる。 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> 

JS

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

ここ

全コードhttp://www.codeply.com/go/Ly1UHW2HT2

Answer 1

まず、あなたの選択ボックスに追加します。

<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

レイアウトを（幅正しくない）あなたは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をコピーすることに問題があると思いますコードサンプルの作業でスクリプトとリンクを直接参照することができます。例については、hereを参照してください。