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引导大小问题

回答

相关问题