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

Posted 2023-03-06

【中文标题】如何在两个引导列之间放置一个图标？

【英文标题】：How to place an icon in between two bootstrap columns?

【发布时间】：2020-10-07 20:33:13

【问题描述】：

我想在同一行的两个引导列之间放置一个居中的图标？这些列都是 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>

【问题讨论】：

可能需要一个 CSS 解决方案来使用 position

想了这么多，也许你可以建议一个 css 实现？

@Java_Man，也许您可​​以发布一个 MVCE 示例来说明您的问题，并使用相关的 html 和 CSS 标记。然后我们可以看到你正在使用什么样的图标，你想要它在哪里等等。

添加了一些html

【参考方案1】：

您可以使用 unicode 直接从 css 调用 font awesome。如果你给div 一个id，你可以使用::after 像这样添加图标：

#stuff::after 
  font-family: "FontAwesome";
  content: "\f007";
  vertical-align: middle;

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

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

【参考方案2】：

如果您没有找到更好的解决方案，那么我会尝试使用：

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

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

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

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

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

【参考方案3】：

使用 CSS，您可以执行以下操作：

<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

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