手风琴菜单CSS与Bootstrap冲突

Question

我的手风琴菜单和Bootstrap发生冲突。 当我链接Bootstrap库时，该功能被完全淘汰。菜单呈现良好，但链接已消失。 当我不链接库时，一切正常（即使可点击区域很小） 显然，必须有一些相同的标签，但我不知道它们是哪个标签。

我的菜单：

    <div class="menu-container">
        <div class="crbnMenu">
            <div class="link-stack" style="width: 100%;">
                <span class="brand">CREW</span>
                <a id="nav-toggle" class="nav-toggle">
                    <span></span>
                </a>
            </div>
            <ul class="menu">
                <li>
                    <a class="nav-link" href="#"><span>About</span> <span 
    class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"> 
   </i></span></a>
                    <ul>
                        <li>
                            <a href="#">Submenu 1_1</a>
                        </li>
                        <li>
                            <a href="#">Submenu 1_2</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="nav-link" href="#"><span>Work</span> <span 
    class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"> 
   </i></span></a>
                    <ul>
                        <li>
                            <a href="#">Submenu 2_1</a>
                        </li>
                        <li>
                            <a href="#">Submenu 2_2</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="nav-link" href="#"><span>Link 3</span> <span 
    class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"> 
   </i></span></a>
                    <ul>
                        <li>
                            <a href="#">Submenu 3_1</a>
                        </li>
                        <li>
                            <a href="#">Submenu 3_2</a>
                        </li>
                        <li>
                            <a href="#">Submenu 3_3</a>
                        </li>
                        <li>
                            <a href="#">Submenu 3_4</a>
                        </li>
                        <li>
                            <a href="#">Submenu 3_5</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="nav-link" href="#"><span>Team</span> <span 
    class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"> 
    </i></span></a>
                    <ul>
                        <li>
                            <a href="#">Submenu 4_1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="nav-link" href="#"><span>Contact</span> 
    <span class="menu-toggle"><i class="fa fa-angle-down" aria- 
    hidden="true"></i></span></a>
                </li>
            </ul>
        </div>
        <div class="content">
            <h1>jQuery crbnMenu Plugin Example</h1>

        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/crbnMenu.js"></script>
    <script>
        if ($(window)) {
            $(function() {
                $('.menu').crbnMenu({
                    hideActive: true
                });
            });
        }

    </script>

非常感谢任何帮助。