html - 如何让我的社交图标在移动 View 中水平显示？

Question

我试图让所有这些社交图标水平显示在直线移动 View 中，但无论我在媒体查询中尝试什么，都没有任何效果。

在桌面 View 中，社交图标水平显示没有问题。

注意:我将媒体查询之外的相同 CSS 用于媒体查询只是为了让球滚动，但它根本不起作用。

我做错了什么，我该如何解决？

这是我的 html 代码:

<div class="container-fluid">
 <div class="socialIcons row">
    <div class="col-sm-1">
        <a href="#">
            <i class="fa fa-envelope"></i>
        </a>
    </div>
    <div class="col-sm-1">
        <a href="#">
            <i class="fab fa-youtube"></i>
        </a>
    </div>
    <div class="col-sm-1">
        <a href="#">
            <i class="fab fa-linkedin"></i>
        </a>
    </div>
</div>

这是CSS:

@media only screen /* ----------- iPhone 6+, 7+ and 8+ ----------- */
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
 i.fa {
    font-size: 2.2em;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}

i.fab {
    font-size: 2.2em;
    color: red;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}

i.fa-linkedin {
    font-size: 2.2em;
    color: #0077B5;
    width: 5.7em;
    text-align:center;
    margin-left: 43.5%;
}
}

Answer 1

您的问题是您用于水平对齐的 Bootstrap 类不适用于超小型设备，“col-sm-1”适用于(最小宽度:576 像素)和更高的分辨率。

我假设您使用的是 Bootstrap 4，因为他们更改了 col-xs-* 的类。

尝试使用“col-1”而不是您正在使用的那个。