html - 如何使 Bootstrap 下拉列表与其输入组一样宽？

Question

我有这个:

这是代码

<div class="col-xs-8 col-xs-offset-2">
    <form role="form">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                    <li class="input"><a href="#">black</a></li>
                    <li class="input"><a href="#">white</a></li>
                    <li class="input"><a href="#">red</a></li>
                    <li class="input"><a href="#">blue</a></li>
                    <li class="input"><a href="#">yellow</a></li>
                </ul>
            </div>
        </div>
    </form>
</div>

fiddle :http://jsfiddle.net/ytqyowgt/

如何使下拉列表与输入框+按钮一样宽？

Answer 1

尝试设置:

.input-group-btn {
    position: static;
}

.dropdown-menu {
    width: 100%;
}

检查updated fiddle