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

时间:2015-02-18 22:18:54

标签: html css twitter-bootstrap

我有这个:

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/

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

2 个答案:

答案 0 :(得分:6)

尝试设置:

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

.dropdown-menu {
    width: 100%;
}

检查updated fiddle

答案 1 :(得分:0)

改变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/