Bootstrap下拉菜单-右侧的列表在Firefox上已被删除 [英] Bootstrap dropdown - right side of the list gets cut off on Firefox

问题描述

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

When I tried to implement some dropdown lists with Bootstrap on a webpage, I noticed that one of them gets cut off on the right side, which looks like this:

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

I am testing with Firefox. Firebug doesn't show any conflict with an overflow attribute, but funnily enough when I de- and reactivate the width attribute of the menu's parent container, the line finally appears, but bold though. I tested the page with IE, where the menu looked fine. Is this just a flaw of Firefox, and can this be fixed somehow? I know this is just a minor cosmetic issue, but it looks really awful in my eyes...

这是我的一些HTML代码:

Here's some of my HTML code:

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

推荐答案

如果您通过选择宽度为98％的div元素包裹选择字段，将解决此问题:

This issue will solve if you wrap your select field by a div element which width 98% like :

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

这篇关于Bootstrap下拉菜单-右侧的列表在Firefox上已被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！