Html 引导4创建一个六列布局

我在设计中使用了一个引导布局，我正试图将它变成一个

六列布局当我尝试创建六列布局时，它不是很好

也许有人能给我正确的结构和css。这里的问题是什么

当我尝试添加其他步骤时，即步骤4、步骤5和步骤6重叠

还有其他步骤

这是我使用的代码

。它是如何工作的{
背景图片：url(https://i.imgur.com/oBA969e.png)，网址(https://i.imgur.com/DwQeMMg.png);
背景重复：重复-x，重复；
背景位置：底部，中心；
填充：90px0；
位置：相对位置；
}
.工作原理：之后{
位置：绝对位置；
右：20px；
顶部：-30px；
背景：url(https://i.imgur.com/ByfB10E.png);
宽度：150px；
高度：51px；
内容：“；
}
.它是如何工作的。text xs center>h2{
颜色：#d8bea5；
边缘底部：50px；
}
.它是如何工作的{
边缘底部：10px；
字号：21px；
}
.它的工作原理wrap>p{
字体大小：300；
}
.工作原理及步骤{
位置：相对位置；
填充：0.2.1rem；
}
1.它是如何工作的{
利润上限：70像素；
}
.它是如何工作的p.pay-info{
字体大小：16px；
颜色：#d8bea5；
边缘顶部：25px；
文本对齐：居中；
}
.工作原理h3{
颜色：#fff
}
.工作原理{
颜色：#9c9da5；
}
.步骤.图标{
位置：相对位置；
宽度：86px；
高度：86px；
利润率：10px自动20px；
线高：78px；
文本对齐：居中；
边框：1px实心#fff；
边界半径：50%；
}
.步骤.图标：之前{
内容：attr（数据步骤）；
位置：绝对位置；
顶部：-10px；
左：5px；
显示：块；
宽度：32px；
高度：32px；
线高：38px；
背景色：#f30；
边界半径：50%；
字号：1.5em；
字体家族：“给你荣耀”，草书；
字号：700；
颜色：#fff；
}
.步骤.图标img，
.step.icon svg{
显示：内联块；
垂直对齐：中间对齐；
宽度：34px；
高度：34px；
}
.它是如何工作的第二步{
填充顶部：20%
}
.col1:之后{
位置：绝对位置；
内容：“；
右图：-21%；
最高：15%；
宽度：185px；
高度：34px；
背景：url(https://i.imgur.com/lUjAjcL.png)不重复；
}
.col2:之后{
位置：绝对位置；
内容：“；
右-16%；
最高：11%；
宽度：175px；
高度：34px；
背景：url(https://i.imgur.com/gbwqu8Y.png)不重复；
}
.它是如何工作的解决方案{
边缘底部：26px；
}
@介质（最大宽度：543px）{
.col1:之后，
.col2:之后{
显示：无
}
}
@介质（最小宽度：544px）和（最大宽度：767px）{
.col1:之后，
.col2:之后{
显示：无
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.col1:之后，
.col2:之后{
显示：无
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.col1:之后，
.col2:之后{
右图：-30%；
}
}
@介质（最小宽度：1200px）{
}

我们如何工作
登记
使用您的电子邮件注册

搜寻
在页面中使用搜索

结账
现在到付款台付款

遵循的简单步骤

您要做的第一件事是将col-md-4更改为col-md-2

<div class="col-xs-12 col-sm-12 col-md-2 how-it-works-steps white-txt col3">

引导在12列网格上工作，因此12/2=6列

这就是你想要达到的目标吗

编辑： 添加在箭头中

---

我已更改CSS，以使用col1类显示箭头，该类可能重复