Bootstrap 全宽下拉菜单不是菜单/导航

问题描述

我需要显示一个包含很多选项的自定义下拉列表。所有选项都是动态的，数据行也是动态的 - 使用 jquery 添加。

因此，我希望下拉菜单占据浏览器的整个宽度（响应式），以便在浏览器上更好地查看许多选项

目前，下拉列表占据列的全宽（col-md-6）但我希望它覆盖在浏览器全宽的其他列的顶部，但仍然相对于点击的城市按钮

我曾尝试使用 bootstrap megamenu，但即使在导航上声明它也不会跨越全宽。

<style>
    .dropdown{
        position:relative;
    }
    .dropdown_content{
        z-index: 1000;
        position: absolute;
        width: 100%;
        right:0;
        left: 0;
        height: 200px;
    }
</style>

<div class="col-md-3">
    <!-- City -->
    <div class="form-group">
        <label for="lender_city_id">City</label>
        <div class="dropdown btn btn-light text-dark w-100 d-flex justify-content-between">City <span class="fas fa-caret-down"></span></div>
    </div>
    {{--Cities Mega menu dropdown--}}
    <div class="dropdown_content mb-3 bg-dark text-light">
</div>

下图显示了我所拥有的以及我需要实现的目标。

解决方法

从下拉列表中删除 position: relative 将其添加到主行。请检查列或表单控件中是否有任何 position: relative 属性。