Bootstrap中select元素的替代方案

Question

我尝试使用bootstrap创建带有select元素的内联标签，

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 ，我需要知道是否存在跨浏览器兼容性问题？用select元素？如果它是select元素的替代品？

Answer 1

您可以使用bootstrap中的内联表单结构：
http://getbootstrap.com/css/#forms-inline

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

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

  

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

你可以在这里看到演示：
http://jsfiddle.net/1q53pr6j/3/

Answer 2

试试这个：

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 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

您所引用的页面仅用于使用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 5

使用引导程序的内联文本框 喜欢这种方式你想要

<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 6

尝试使用此CSS作为选择元素。

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