Html 如何偏移我的列以便链接可以单击？

我正在为一个网站创建一个“类似应用程序”的菜单栏，仅限手机版。此栏有两个可单击图标，中间有一个主按钮。尽管我成功地编写了html/css，但我无法单击图标，因为“+”按钮位于图标顶部。有没有一种方法可以让用户点击菜单，加上和用户图标

这是我的设计：

我用以下代码创建了这个设计（我使用的是Bootstrap4和Fontawesome）

.footer移动容器{
位置：固定；
底部：0；
左：0；
右：0；
z指数：10；
高度：54px；
背景色：#8ABE57；
宽度：100%；
保证金：0自动；
填充：10px 40px；
盒影：0px-4px8pxRGBA（0,0,0,0.1）；
}
.footer容器移动i{
颜色：白色；
字体大小：1.3em；
边缘顶部：5px；
}
.circle btn mobile{
宽度：70px；
高度：70像素；
边界半径：50%；
背景色：#31353C；
颜色：白色；
文本对齐：居中；
对齐项目：居中；
字号：2em；
滤镜：投影（0px 0px 13px rgba（0,0,0,0.47））；
显示器：flex；
弯曲方向：行；
}
.circle btn移动容器{
z指数：50；
位置：固定；
底部：12px；
左：0；
右：0；
}

+

添加

宽度：适合内容

css用于

circle btn移动容器

container，并

m-auto

class，如下所示制作

margin:auto：

<div class="row circle-btn-mobile-container m-auto">


+
添加
宽度：适合内容
css用于
circle btn移动容器
container，并
m-auto
class，如下所示制作
margin:auto：

<div class="row circle-btn-mobile-container m-auto">


+