Bootstrap 下拉列表 - 列表的右侧在 Firefox 上被截断

Question

当我尝试在网页上使用 Bootstrap 实现一些下拉列表时，我注意到其中一个在右侧被截断，如下所示：

我正在使用 Firefox 进行测试。 Firebug 没有显示与 overflow 属性的任何冲突，但有趣的是，当我取消并重新激活菜单父容器的 width 属性时，该行终于出现了，但粗体。我用 IE 测试了这个页面，菜单看起来不错。这只是Firefox的一个缺陷，可以通过某种方式修复吗？我知道这只是一个小问题，但在我看来真的很糟糕......

这是我的一些 HTML 代码：

<div class="container">
...     
<div class="para">
    ...
    <form action="form.php" method="post" enctype="multipart/form data">
        ...
        <div class="form-group">
            ...
            <div class="row">
                ...
                <div class="col-md-1">
                    <select name="unit" size="1" class="form-control unit" required>
                        <option value="kW">kW</option>
                        <option value="MW">MW</option>
                        <option value="GW">GW</option>
                        <option value="kWh">kWh</option>
                        <option value="MWh">MWh</option>
                        <option value="GWh">GWh</option>
                    </select>
                </div>
                ...
            </div>
        </div>
        ...
    </form>
</div>

Answer 1

如果你用一个宽度为 98% 的 div 元素包裹你的选择字段，这个问题就会解决：

<div class="col-md-1">
    <div style="width:98%">
    <select name="unit" size="1" class="form-control unit" required>
        <option value="kW">kW</option>
        <option value="MW">MW</option>
        <option value="GW">GW</option>
        <option value="kWh">kWh</option>
        <option value="MWh">MWh</option>
        <option value="GWh">GWh</option>
    </select>
    </div>
</div>