Html 图标不能并排放置

我是新手。我想在任意大小的屏幕上并排放置两个图标。它可以在中型设备上正常工作，但当我在移动设备上运行它时，图标会一个接一个地放置，而不是并排放置。此外，我的利润在较小的设备上不起作用

<div class="row text-center">
    <div class="col-sm-6 xs-my-20 col-md-6">
        <i class="fab fa-facebook-f icons"></i>
    </div>
    <div class="col-sm-6 xs-my-20 col-md-6">
        <i class="fab fa-facebook-f icons"></i>
    </div>
</div>

---

只需像这样使用

col-xs-6

：

<div class="container">
<div class="row text-center">
        <div class="col-xs-6">
            <i class="fab fa-facebook-f icons"></i>
        </div>
        <div class="col-xs-6">
            <i class="fab fa-facebook-f icons"></i>
        </div>
      </div>
</div>

如果升级到bootstrap V4，只需执行以下操作：

<div class="container">
<div class="row text-center">
        <div class="col">
            <i class="fab fa-facebook-f icons"></i>
        </div>
        <div class="col">
            <i class="fab fa-facebook-f icons"></i>
        </div>
      </div>
</div>

---

我不确定xs-my-20是否是您创建的自定义类，但您应该能够添加col-xs-6，它将允许两个图标在任意大小的屏幕中并排显示

如果xs-my-20是一个自定义类，您可能会有一些影响显示的css，如边距等

您也不需要添加col-md-6。如果您使用col-xs-6，它将包括xs及以上（xs、sm、md、lg）。就像所有的颜色大小一样。例如，col-md-6已经应用了col-md-6和col-lg-6，而您无需编写它

希望这有帮助

---

如果总是需要两列，请尝试将包含图标的两个div的类更改为col-6