Question

我有这个：

dropdown screenshot

这是代码

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

小提琴：http://jsfiddle.net/ytqyowgt/

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

Answer 1

尝试设置：

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

.dropdown-menu {
    width: 100%;
}

检查updated fiddle

Answer 2

改变HTML的结构：

<div class="col-xs-8 col-xs-offset-2">
    <form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control">
                <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>
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>
</div>

和CSS：

 .input-group-btn ul {
width:100%;
  }

唯一的问题是你松开按钮上的圆角。

http://jsfiddle.net/ytqyowgt/4/

如何使引导下拉列表与输入组一样宽？

2 个答案: