将 bootstrapv4 下拉列表与其外部父级对齐

如何解决将 bootstrapv4 下拉列表与其外部父级对齐

我试图使下拉菜单的宽度类似于它的外部父级，即 footer-menu（红色边框区域）并且也左对齐。它在 .footer-nav-item 显示为 block 元素时有效，但在显示为 inline-block 时无效。我需要它们是 inline-block，这是我得到的：

HTML：

                    <div class='sidebar position-fixed h-100' style="width: 280px;padding-left: 2rem;"> 
                     ...
                        <div class="py-3 footer-menu redborder">
    
                            <ul class="nav greenborder">
                                <li class="footer-nav-item">
                                    <a class="txt-fs-subtitle mr-3" href="">
                                        link1
                                    </a>
                                </li>
                                <li class="footer-nav-item">
                                    <a class="txt-fs-subtitle mr-3" href="">
                                        link2
                                    </a>
                                </li>
                                <li class="footer-nav-item">
                                    <a class="txt-fs-subtitle mr-3" href="">
                                        link3
                                    </a>
                                </li>
    
                                <li class="footer-nav-item dropup">
                                    <a class="txt-fs-subtitle" href="#" role="button" id="footer-more-menu" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                                       more...
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-custom Box-shadow-fs-default border-rad-fs-3 w-100" aria-labelledby="footer-more-menu">
                                        <li><a class="dropdown-item" href="#">more link 1</a></li>
                                        <li><a class="dropdown-item" href="#">more link 2</a></li>
                                        <li><a class="dropdown-item" href="#">more link 3</a></li>
                                    </ul>
                                </li>
    
                            </ul>
    
                            <div class="small text-muted mt-1">© example.it</div>
    
                        </div>
                   </div>

在 position-relative 中尝试了 .footer-menu，没有用。那么如何通过保持其外部父级的完整宽度来使下拉菜单左对齐？