我尝试使用 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 ,我需要知道是否存在跨浏览器兼容性问题或其他问题?与选择元素?如果是选择元素的替代品是什么?
最佳答案
您可以使用 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/
关于jquery - Bootstrap 中选择元素的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29772302/