引导全宽下拉菜单（不是菜单/导航）

Question

我需要显示一个包含很多选项的自定义下拉菜单。所有选项都是动态的，数据行也是动态的 - 使用 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>

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

Answer 1

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