css - 页脚内容未显示在移动 View 中

Question

对此还很陌生，所以提前致歉。

在我的页脚中，桌面 View 工作正常。横向移动 View 也是如此。这是它在这两个 View 上的样子

Landscape views

但是在手机画像中，社交媒体图标不见了，我哪里错了？

Portrait View

我的页脚的 HTML 代码

<footer class="nav navbar-fixed-bottom navbar-default">
                <div class="container-fluid">
                    <p>&copy; 2017 Example Example</p>
                    <ul>
                        <li><a href=""><span class="fa fa-twitter"></span></a></li>
                        <li><a href=""><span class="fa fa-facebook"></span></a></li>
                        <li><a href=""><span class="fa fa-instagram"></span></a></li>
                        <li><a href=""><span class="fa fa-snapchat"></span></a></li>
                        <li><a href=""><span class="fa fa-youtube"></span></a></li>
                    </ul>
                </div>
            </footer>

页脚样式的 CSS

footer {
    background-color: #000000;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

footer p {
    float: left;
    text-align: center;
    margin-top: 15px;
}

footer ul {
    list-style: none;
    display: flex;
    flex: 1;
    flex-direction: row;
    float: right;
    font-size:35px;
    margin-top: 2px;
}

.fa-twitter {
    margin-right:10px;
    color: #fff;
}

.fa-twitter:hover{
    color: #00aced;
}

.fa-facebook {
    margin-right:10px;
    color: #fff;
}

.fa-facebook:hover{
    color: #3b5998;
}

.fa-instagram {
    margin-right:10px;
    color: #fff;
}

.fa-instagram:hover{

    background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.fa-snapchat {
    margin-right:10px;
    color: #fff;
}

.fa-snapchat:hover{
    color: #fffc00;
}

.fa-youtube {
    margin-right:5px;
    color: #fff;
}

.fa-youtube:hover{
    color: #cb2027;
}

如有任何帮助，我们将不胜感激!

Answer 1

很可能带有社交图标的 ul 根本不适合 p 标签文本旁边的页脚宽度，并被推到下方新行(两者都是 float 的)。但是由于高度是固定的(50px)，所以它被隐藏了。尝试将 footer 的高度更改为 100px 之类的值进行测试，然后您会看到是否发生了这种情况。如果是，则必须将所有内容缩小一点(在媒体查询中)，以便它可以放在一行中。