Bootstrap：设置 width: auto 选项使下拉菜单变得丑陋答案

【问题标题】：Bootstrap: setting width: auto for option makes the dropdown uglyBootstrap：设置 width: auto 选项使下拉菜单变得丑陋
【发布时间】：2015-12-01 22:31:57
【问题描述】：

我对下拉菜单（选择选项）所做的只是添加了一个样式：

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，边框被修剪：

我怎样才能防止这种情况发生？

【问题讨论】：

问题是？

标签： jquery html css twitter-bootstrap

【解决方案1】：

改变显示：inline 到 inline-block

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

【讨论】：

问题是一个陈述。 “将此 CSS 添加到此元素会使其变得丑陋”。这是true 声明。你到底在回答什么问题？
如何避免让它变得丑陋？ :)
这是一个糟糕的问题，但你可以清楚地看到他希望边框“不被修剪”:) ... 更有帮助
我强烈建议您提出问题，而不是让人们猜测。
同意，使用“评论”功能帮助他！ :)

【解决方案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

【讨论】：

是的，对，同时我想通了。我以为我必须破解引导程序