Bootstrap选择显示错误

时间:2013-10-15 20:28:13

标签: javascript twitter-bootstrap

我正在使用Silvio Moreto's BootStrap library并且它没有正确显示选择。

这是问题的screen shot

我的猜测是我做错了什么。我不知道是什么导致了这个问题,但我查了一下 我的javascript加载顺序,这似乎很好。

下面是我执行代码的html。

<select name="action_type" class='selectpicker'>
  <option value="phone">call</option>
  <option value="email">email</option>
  <option value="url">open to url</option>
</select>

这是执行selectpicker()后的扩展形式。

<div class="btn-group bootstrap-select">
  <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown">
    <div class="filter-option pull-left">call</div>&nbsp;
    <div class="caret"></div></button><div class="dropdown-menu open">
    <ul class="dropdown-menu inner" role="menu">
      <li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">call</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
      <li rel="1"><a tabindex="0" class="" style=""><span class="text">email</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
      <li rel="2"><a tabindex="0" class="" style=""><span class="text">open to url</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
    </ul>
  </div>
</div>

任何人都知道发生了什么事吗?我认为它可能是CSS。

更新::

我只使用bootstrap框架的某些部分,因为有很多我不需要的部分。我使用按钮,窗体和下拉列表js / css的2.3.2版本,但由于某种原因,它对于引导选择器是不够的。

以下是仅使用test file中的bootstrap 3.0来源的图片。

谢谢!

1 个答案:

答案 0 :(得分:0)

您是否初始化了jQuery库并告诉它应用更改的哪些元素?

来自图书馆文档...

$('.selectpicker').selectpicker();

您需要在document.ready

上执行此操作