Jquery 响应引导网站中的循环菜单//如何保持菜单按钮位置？

我创建了一个水平滑动的网站，它是一个宽度为500%的容器站点，每个站点有5个部分，每个部分的宽度为20%。我发现了一个CSS jquery循环菜单，我根据自己的要求对其进行了操作，并对其进行了修复，使其在网站左右移动时固定在中心位置。不幸的是，当我调整页面大小或更改分辨率时，菜单页面对齐失败。昨天，我决定将该网站改为一个响应性设计网站，我使用bootstrap实现了这一点，它成功了。问题在于循环菜单。即使在更改浏览器宽度时，我也设法将其位置固定为居中，但菜单项不会随菜单按钮一起移动，它会朝不同的方向移动，因此不会在小宽度上对齐。如何将菜单项粘贴到菜单本身

菜单代码HTML代码：

<div class="circular-menu">
            <div class="circle">

               <ul id="nav" class="cirular-list navbar-default" >
                        <li><a href="#Home">Home</a></li>              
                        <li><a href="#OurWork">Our Work</a></li>            
                        <li><a href="#Technologies">Technologies</a></li>
                        <li><a href="#ContactUs">Contact Us</a></li>
                        <li><a href="#AboutUs">About Us</a></li>
                </ul>

            </div>

                <a href="" class="menu-button"><img id="Img1" runat="server" src="Images/c1.jpg" /></a>

            </div>

JS：

var items = document.querySelectorAll('.circle a');

for (var i = 0, l = items.length; i < l; i++) {
    items[i].style.left = (50 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";

    items[i].style.top = (50 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function (e) {
    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

该部分由以下3列组成：

 <div id="ContactUs" class="section row">
            <div class="jumbotron whiteBack">
            <h1>Contact Us</h1>    
            </div>        
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Left part
</div>
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Circular Menu
</div>
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Right part
</div>

---

它给了我错误{错误：请使用POST请求}这就是你要找的吗？如果是这样，我会发布一个解释。是的，你是怎么做到的！！这是我正在使用的菜单。当我更改分辨率或宽度时，如何保持菜单图标与周围的菜单按钮对齐，以及您是否已经这样做了！！，太棒了，请解释一下

 <div id="ContactUs" class="section row">
            <div class="jumbotron whiteBack">
            <h1>Contact Us</h1>    
            </div>        
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Left part
</div>
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Circular Menu
</div>
   <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
Right part
</div>