Select2 显示 Bootstrap 的问题

Question

我想用 bootstrap 制作漂亮的 select 盒子，我在这里找到了一个很棒的盒子：http://wrapui.com/items/preview/wrapkit/1.0/form-elements.html。但是我无法理解如何在 “Select-Select2” div 。
我试图包含所有 css 和那个 bootstrap 主题中包含的 js 文件，复制粘贴整个 <form> 但它无法正常工作。
好消息是 select 元素出现在那个 bootstrap 主题中。坏消息是点击没有任何动作，select 框没有打开。 morris.min.js 中浏览器的控制台也出现错误“未捕获错误：未找到图形容器元素”。这里： https://github.com/morrisjs/morris.js/issues/137 它说

JavaScript's code gets executed before the DOM contains #annual element. Put the javascript after the div or use jQuery.ready().

但是所有 javascript 代码都包含在 html 文件的末尾。

我已经为此苦苦挣扎了几天。如果有人能帮忙，请。
P.S。我在后端 Rails 上使用 Ruby。

Answer 1

这是 html 代码：

我还在 jsfiddle 外部 library.check 中包含了 css 和 select 2 个文件。

<label class="col-sm-3 control-label" for="select2">Please select something</label>
<div class="col-sm-5">
    <select style="width:100%" data-input="select2" placeholder="Select your time zone">
        <option value=""></option>
        <optgroup label="Alaskan/Hawaiian Time Zone">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
        </optgroup>
        <optgroup label="Pacific Time Zone">
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
            <option value="OR">Oregon</option>
            <option value="WA">Washington</option>
        </optgroup>
        <optgroup label="Mountain Time Zone">
            <option value="AZ">Arizona</option>
            <option value="CO">Colorado</option>
            <option value="ID">Idaho</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NM">New Mexico</option>
            <option value="ND">North Dakota</option>
            <option value="UT">Utah</option>
            <option value="WY">Wyoming</option>
        </optgroup>
        <optgroup label="Central Time Zone">
            <option value="AL">Alabama</option>
            <option value="AR">Arkansas</option>
            <option value="IL">Illinois</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="OK">Oklahoma</option>
            <option value="SD">South Dakota</option>
            <option value="TX">Texas</option>
            <option value="TN">Tennessee</option>
            <option value="WI">Wisconsin</option>
        </optgroup>
        <optgroup label="Eastern Time Zone">
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="IN">Indiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="OH">Ohio</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WV">West Virginia</option>
        </optgroup>
    </select>

看看这个fiddle

Select2 显示 Bootstrap 的问题

Select2 displaying issues with Bootstrap

jquery

twitter-bootstrap

twitter-bootstrap-3