Html 带输入组的全宽引导下拉列表

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

我之所以需要它，是因为我需要一个jstree，因为我的选择需求太复杂，无法适应简单的选择

下面是我想要的样子：

我希望下拉区是输入的全宽。我试着将其设置为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>

选择权


aaaa

aaaa

aaaa

aaaa

---

完整JSFIDLE:

不要将这种ul li用于select项，以便在引导中自定义select。有可用的插件，请尝试此方法

这里有更多的链接

---

不要将这种ul li用于选择项以自定义引导中的选择有可用的插件，请尝试此选项

这里有更多的链接

试试这个。 使用Jquery。

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

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

试试这个。 使用Jquery。

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

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

---

我找到了一个使用.input组插件而不是.input组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>

aa
aa
aa

---

查看此提琴：

我发现了一个使用.input组插件而不是.input组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>

aa
aa
aa

---

看看这把小提琴：

谢谢，但这些不符合我的需要。事实上，我需要在其中包含一个jstree。如果只是为了选择，我会使用select2。我更新了问题以反映这一点。请添加屏幕截图以了解要求。完全不工作，当我需要它是输入组宽度的100%时，下拉内容仍然是固定宽度。此处100%不工作，bcz它位于小div输入组btn内，因此，获取动态宽度，并通过jquery将该宽度分配给ul参考，谢谢，但这些不符合我的需要。事实上，我需要在其中包含一个jstree。如果只是为了选择，我会使用select2。我更新了问题以反映这一点。请添加屏幕截图以了解要求。完全不工作，当我需要它是输入组宽度的100%时，下拉内容仍然是固定宽度。此处100%不工作，bcz它位于小div输入组btn内，因此，获取动态宽度，并通过jquery将该宽度分配给ul refere here。工作正常，谢谢，customwwidth中只有一个输入错误，一个双w。哦，是的。更正。。还有一件事你应该删除下拉菜单上的最小宽度。下拉菜单{min width:auto（可能是！重要）}运行良好，谢谢，只是有一个输入错误，customwwidth中有一个双w。哦，是的。更正。。还有一件事你应该删除下拉菜单上的最小宽度。下拉菜单{最小宽度：自动（可能是！重要）}不错！我用了这个方法，很好！我使用了这个解决方案。