Bootstrap 中选择元素的替代方案

Question

我尝试使用引导程序创建带有选择元素的内联标签，

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

避免在此处使用 <select> 元素，因为它们无法在 WebKit 浏览器中完全设置样式。

有什么替代方法？他们没有在那里提到.. 有没有好的方法可以做到这一点而不需要大量的黑客攻击？

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

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

Answer 1

您所引用的页面仅用于使用Input groups 而不是用于内联表单。所以您可以这样使用：Demo

HTML：

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

要了解有关内联表单的更多信息，请参阅此Link

Answer 2

为选择元素试试这个 CSS。

.selectClassName {
    max-width: 90%;
    display: inline;
}

Answer 3

您可以在表单标签上使用form-inline 类：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<form id="searchForm"  method="get" class="form-inline" role="form">
 <div class="form-group">
     <label for="GPA" class="control-label">GPA :</label>
     <input name="GPA" type="number" value="2.5" class="form-control"                    id="GPA"/>
 </div> 
 <div class="form-group">
        <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>
 </form>

Answer 4

使用引导程序的内联文本框 就像你想要的那样

<form id="searchForm"  method="get" class="form-horizontal" role="form">
<div class="input-group">
    <span class="input-group-addon">GPA</span>

    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    </div>

</form>

DEMO

Answer 5

试试这个：

DEMO1 // 您需要的移动视图

DEMO2 // 实际移动端视图

希望这对你有用..

 <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <label for="GPA" class="control-label">GPA :</label>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <input name="GPA" type="number" value="2.5" class="form-control" id="GPA" />
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <label for="faculty" class="control-label">Faculty:</label>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <select class="form-control" name="faculty">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>

Answer 6

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

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

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

可能需要自定义宽度
输入和选择的宽度：100%；应用 默认情况下在 Bootstrap 中。在内联表单中，我们将其重置为宽度： 汽车;因此多个控件可以驻留在同一行。根据 您的布局，可能需要额外的自定义宽度。

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