在两列子菜单中动态调整宽度

Question

我没有写标题的内容。但是我尝试在boostrap中创建两列子菜单。我将列分隔为col-lg-auto，但是类行创建的列的宽度为col-lg-12，而我的列子菜单仅填充宽度12的一部分。宽度的其他部分为白色/空白。

这是该子菜单的代码：

<div class="d-lg-flex flex-md-row align-items-center g-pos-rel">
    <div class="col g-mt-10 g-mt-0--lg g-px-20">
        <nav class="js-mega-menu navbar navbar-expand-lg hs-menu-initialized hs-menu-horizontal">

            <!-- Navigation -->
            <div class="navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg g-mr-40--lg collapse show" id="navBar" style="">
                <ul class="navbar-nav text-uppercase g-pos-rel g-font-weight-600 ml-auto">

                    <!-- Pre zakaznikov -->
                    <li class="hs-has-mega-menu nav-item g-mx-10--lg" data-animation-in="fadeIn" data-animation-out="fadeOut" data-position="left">
                        <a asp-page="/Pre_zakaznikov/Pre_zakaznikov" class="nav-link g-px-0" id="nav-forCustomers" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-2">
                                        Pre zákazníkov
                                        <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
                                    </a>

                        <!-- Megamenu -->
                        <div class="w-100 hs-mega-menu g-text-transform-none g-brd-top g-brd-primary g-brd-top-2 g-min-width-200 g-mt-10 g-mt-10--lg--scrolling hs-position-center" aria-labelledby="mega-menu-home" style="display: block; max-width: 60%;">
                            <div class="row align-items-stretch no-gutters">
                                <div class="col-lg-auto">
                                    <ul class="list-unstyled" id="nav-submenu-2" aria-labelledby="nav-forCustomers">
                                        <li class="dropdown-item">
                                            <a class="nav-link g-px-0" asp-page="/Pre_zakaznikov/Nase_sluzby">Naše služby</a>
                                        </li>
                                        ...
                                    </ul>
                                </div>
                                <div class="col-lg-auto g-brd-left--lg g-brd-gray-light-v5">
                                    <ul class="list-unstyled" id="nav-submenu-2" aria-labelledby="nav-forCustomers">
                                        <li class="dropdown-item">
                                            <a class="nav-link g-px-0" asp-page="/Pre_zakaznikov/Ako_uzatvorit_zmluvu">Ako uzatvoriť zmluvu</a>
                                        </li>
                                        ...
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- End Megamenu -->

                    </li>
                    <!-- End Pre zakaznikov -->

                </ul>
            </div>
            <!-- End Navigation -->

        </nav>
    </div>
</div>

谢谢您的任何建议。如果您需要更多信息或其他特殊信息，请告诉我，我会添加它。