jquery - Bootstrap 中选择元素的替代方案

Question

我尝试使用 Bootstrap 创建带有选择元素的内联标签，

http://jsfiddle.net/kokilajs/1q53pr6j/

<form id="searchForm"  method="get" class="form-horizontal" role="form">
<div class="form-group">
    <label for="GPA" class="col-xs-2 control-label">GPA :</label>
    <div class="col-xs-2">
        <input name="GPA" type="number" value="2.5" class="form-control"                 id="GPA"/>
    </div>

    <div class="col-xs-8">
        <label for="faculty" class="control-label">Faculty:</label>
        <select class="form-control" name="faculty">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>
</form>

我失败了! :( 然后我搜索并找到 this

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

有什么替代方案吗？他们没有在那里提到..有没有好的方法可以做到这一点而不需要很多黑客？

更新:避免使用<select>元素

在 Bootstrap 页面中，它们 noted ，我需要知道是否存在跨浏览器兼容性问题或其他问题？与选择元素？如果是选择元素的替代品是什么？

Answer 1

您可以使用 Bootstrap 中的内联形式结构:
http://getbootstrap.com/css/#forms-inline

删除所有类，如“col-xs”并将标签/字段包装在 <div class="form-group"> 中
并且您必须指定输入和选择字段的宽度。

input, select {
    width: 200px !important;
}

May require custom widths
Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

您可以在此处查看演示:
http://jsfiddle.net/1q53pr6j/3/