如何在两个引导程序列之间放置图标？

Question

我想将图标居中放置在同一行的两个引导程序列之间？列各为col-6，并且不能更改。我希望此图标始终位于移动设备和台式机等两列之间。如何实现此目的？

<a class="row bg-light" href="#">
    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>

    I want an Icon here like: <i class="fa-bla"></i>

    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>
</a>

Answer 1

如果找不到更好的解决方案，那么我将尝试使用：

display: grid;
grid-template-columns: 45% 5% 45%;

（或者您需要尺寸来填满页面）

然后可以弯曲图标使其居中放置：

display: flex;
justify-content: center;
align-items: center;

在Bootstrap中更改col-X也可以，但是您说不能更改它们，所以...我希望您可以使它工作。

Answer 2

类似这样的东西：

<a class="row bg-light" href="#">
    <div class="col-lg-6 has-icon">
        <!-- stuff -->
        <i class="fa-bla"></i>
    </div>
    <div class="col-lg-6">
        <!-- stuff -->
    </div>
</a>

.has-icon {
    position: relative;
}
.has-icon i {
    position: absolute;
    top: 50%;
    margin-top: -10px; // half of the icon's height 
    left: -10px; // will need adjusting to preference
}

[当较小的设备上的列折叠时，您还需要考虑重新定位，因此，请使用媒体查询并将图标放在第一列的底部。