Question

我是bootstrap的新手。我想在任何屏幕尺寸上并排放置2个图标。它可以在中型设备上正常工作，但是当我在移动设备上运行时，图标会一个放在另一个下方，而不是并排放置。此外，我的利润不适用于较小的设备。

<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>

Answer 1

只需使用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>

Answer 2

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

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

您也不需要添加col-md-6。如果你使用col-xs-6，它将包括xs及以上（xs，sm，md，lg）。与所有col大小一样。例如col-md-6已经应用了col-md-6和col-lg-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>

图标不是并排放置的

2 个答案: