Bootstrap：设置宽度：auto for option使下拉菜单难看

Question

我在下拉列表中所做的一切（select-options）都添加了一个样式：

display: inline; width: auto;

使其不是100％宽度。所以它看起来像：

<select style="display: inline; width: auto;" 
        class="form-control" 
        name="agefrom" 
        id="agefrom">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="17">17</option>
</select>

使用最新的Firefox，边框会被修剪：

我怎么能阻止这个？

Answer 1

更改显示：内联到内联块

<select style="display: inline-block; width: auto;" class="form-control" name="agefrom" id="agefrom">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="17">17</option>

Answer 2

浏览器的渲染引擎添加了选择框空格。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms#Dealing_with_the_select_nightmare

和

我建议使用这种方式制作内联表格

• 将类.form-inline添加到<form>元素

http://www.w3schools.com/bootstrap/bootstrap_forms.asp