如何在Magento 2.2.6中实现用Bootsrap 3.3.7制作的自定义菜单？

Question

已经有一段时间了，因为我正在寻找有关此主题的文档。 我有一个用Bootstrap 3.3开发的水平响应菜单 我可以在网站上正确显示它，创建一个块和小部件。

我想在div部分项目nav-sections项目之间实现它。

为此，我必须修改topmenu.phtml。

我以几种方式在此文件中插入了代码，但菜单显示不正确...

这是相关代码的示例：

<div class="container">

                    切换导航                                         超级菜单     

<div class="collapse navbar-collapse js-navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

      <ul class="dropdown-menu mega-dropdown-menu row">
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">New in Stores</li>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="item active">
                  <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
                  <h4><small>Summer dress floral prints</small></h4>
                  <button class="btn btn-primary" type="button">49,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
                <div class="item">
                  <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
                  <h4><small>Gold sandals with shiny touch</small></h4>
                  <button class="btn btn-primary" type="button">9,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
                <div class="item">
                  <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
                  <h4><small>Denin jacket stamped</small></h4>
                  <button class="btn btn-primary" type="button">49,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
              </div>
              <!-- End Carousel Inner -->
            </div>
            <!-- /.carousel -->
            <li class="divider"></li>
            <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Dresses</li>
            <li><a href="#">Unique Features</a></li>
            <li><a href="#">Image Responsive</a></li>
            <li><a href="#">Auto Carousel</a></li>
            <li><a href="#">Newsletter Form</a></li>
            <li><a href="#">Four columns</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Tops</li>
            <li><a href="#">Good Typography</a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Jackets</li>
            <li><a href="#">Easy to customize</a></li>
            <li><a href="#">Glyphicons</a></li>
            <li><a href="#">Pull Right Elements</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Pants</li>
            <li><a href="#">Coloured Headers</a></li>
            <li><a href="#">Primary Buttons & Default</a></li>
            <li><a href="#">Calls to action</a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Accessories</li>
            <li><a href="#">Default Navbar</a></li>
            <li><a href="#">Lovely Fonts</a></li>
            <li><a href="#">Responsive Dropdown </a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Newsletter</li>
            <form class="form" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <button type="submit" class="btn btn-primary btn-block">Sign in</button>
            </form>
          </ul>
        </li>
      </ul>

    </li>
  </ul>

</div>
<!-- /.nav-collapse -->

如何使其与Magento兼容，而不会丢失我的帐户和在移动设备上设置的标签

我们将非常感谢您的帮助