Question

我试图使所有这些社交图标在直线移动视图中水平显示，但是无论我在媒体查询中尝试什么，都无济于事。

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

注意：我在媒体查询中使用了与媒体查询外部相同的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”代替您正在使用的那个。

如何使社交图标在移动视图中水平显示？

1 个答案: