Jquery 引导中select元素的备选方案

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

GPA：
教员：
1.
2.
3.
4.
5.

我失败了！：（然后我搜索并找到了

避免在此处使用

元素，因为它们无法在WebKit浏览器中完全设置样式

有什么替代方法呢？他们没有提到……有没有好的方法可以在没有大量黑客的情况下做到这一点

更新：避免使用

元素

---

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

您可以使用引导中的内联表单结构：

删除所有类，如“col xs”，并在

您必须为输入和选择字段指定宽度

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

可能需要自定义宽度
输入和选择的宽度：100%；已应用 默认情况下，在引导中。在内联表单中，我们将其重置为宽度： 自动；因此多个控件可以驻留在同一行上。具体取决于 您的布局可能需要额外的自定义宽度

您可以在此处看到演示：
试试这个：

//您所需的移动视图 //实际移动视图 希望这对你有用

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

GPA：
教员：
1.
2.
3.
4.
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>

平均成绩

---

您可以在表单标签上使用

表单内联

类：

GPA：
教员：
1.
2.
3.
4.
5.

为select元素尝试此CSS

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

---

您所指的页面仅用于使用

输入组

，不用于内联表单。因此，您可以这样使用：

HTML:

教员：
1.
2.
3.
4.
5.

---

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

yeh thnkz，没关系，另一件事是我需要澄清关于避免使用元素的问题？那么我可以使用什么？这意味着什么，选择您需要自定义选择框的替代项？他们在这里提到避免使用元素，因为它们无法在WebKit浏览器中完全设置样式。我我怀疑这个选择元素响应或样式在另一个浏览器上失败，我指的是跨浏览器兼容性

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

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