Question

我尝试使用下拉区域来托管自定义组件。但是，下拉列表不是来自标准下拉列表，而是来自输入组按钮。

我需要这个，因为我想要一个jstree，因为我的选择需要太复杂而不适合简单的选择。

这就是我想要的样子：

enter image description here

我希望下拉区域是输入的全宽。我已经尝试将其设置为100％，但它无法做任何事情。固定工作，但会破坏网站的响应能力。

这是我的HTML：

<div class="col-md-3">
    <fieldset>
        <legend>Options</legend>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="width: 300px;">
                        <li>
                            aaaa<br />
                            aaaa<br />
                            aaaa<br />
                            aaaa<br />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </fieldset>
</div>

Full jsfiddle：https://jsfiddle.net/rry7hr5b/1/

Answer 1

试试这个。 使用Jquery。

$(document).ready(function(e) {
    function customwidth()
        {
            var formwidth = $('.form-group').width();       
            $('.dropdown-menu').width(formwidth);   
        }

        customwidth();
        $(window).resize(function(e) {
            customwidth();
        });
    });

Answer 2

我找到了使用 .input-group-addon 而不是 .input-group-btn 的解决方法。它很整洁，因为你不需要任何插件或jQuery。但请注意，整个下拉菜单需要最小宽度。

<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-addon" style="padding:0; border:none; background:none">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" style="border-bottom-left-radius:0; border-top-left-radius:0">
            <span class="caret"></span>
        </button>
    </div>
    <ul class="dropdown-menu" role="menu" style="width:100%;">
        <li>aa</li>
        <li>aa</li>
        <li>aa</li>
    </ul>
</div>

看看这个小提琴：https://jsfiddle.net/rry7hr5b/5/

Answer 3

不要使用这种ul li来选择项目来自定义选择在bootstrap中有插件可用请试试这个

http://silviomoreto.github.io/bootstrap-select/

这里有更多链接..

http://gregfranko.com/jquery.selectBoxIt.js/

带有输入组

3 个答案: