html - Bootstrap 3 输入下拉菜单

Question

我正在使用引导程序的下拉菜单作为文本输入元素。

在我尝试在输入组中使用它之前它工作正常。然后偏移量变得混乱，菜单显示在文本输入上。

任何人都知道如何解决这个问题？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">Wrong:</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="dropdown open">
                        <input type="text" class="form-control">
                        <ul class="dropdown-menu">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>
                    </div>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Load</button>
                        <button type="button" class="btn btn-default">Save</button>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">...</label>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Correct:</label>
            <div class="col-sm-9">
                    <div class="dropdown open">
                        <input type="text" class="form-control">
                        <ul class="dropdown-menu">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>
                    </div>
            </div>
        </div>
    </form>
</div>

标签： htmlcsstwitter-bootstrap-3

Answer 1

删除float:left；从或.input-group .form-control添加float:none;.input-group .form-control