Question

我正在尝试在我的应用程序中实现selectize.js库，但它似乎与bootstrap冲突。请参阅下面的代码：

$(document).ready(function(){
  $('#country').selectize();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->




<form>
  <div class="form-group">
    <label class="control-label">Country</label>
    <select id="country" class="form-control">
      <option value="Japan">Japan</option>
      <option value="US">US</option>
      <option value="United Kingdom">United Kingdom</option>
    </select>
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>

答案：

刚刚删除了select元素中的类form-control。

Answer 1

尝试这一个增加值

<form>
  <div class="form-group">
    <label class="control-label">Country</label>
    <select id="country" class="form-control">
      <option value="Japan">Japan</option>
      <option value="US">US</option>
      <option value="United Kingdom">United Kingdom</option>
    </select>
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>

Selectize.js与bootstrap select元素冲突

1 个答案: