页脚内容未显示在移动视图中

Question

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

在我的页脚中，桌面视图工作正常。横向移动视图也是如此。这是这两个视图的外观

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 标签文本旁边的页脚宽度，并被推到下面的新行中（两者都是浮动）。但是由于高度是固定的（50px），所以它被隐藏了。尝试将 footer 的高度更改为 100px 之类的东西进行测试，然后您会看到是否发生了这种情况。如果是，则必须将所有内容缩小一点（在媒体查询中），以便它可以放在一行中。

Answer 2

您的问题是您的社交图标太大，所以整个 <ul> 换行到下一行，但是由于您在 <footer> 上定义了高度，它落在了视口。试着让你的图标变小，或者对你的 <p> 做一些事情，让它的文本以更窄的宽度换行。

Answer 3

您可能想尝试在所有内容周围放置正文标签，例如

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <title></title>
        </head>
        <body class="works_on_smartphone">
        .
        .
        .
        <footer>
        .
        .
        .
        </footer>
        </body>
        </html>

这可能会有所帮助。

您可能想了解的另一种方法是为无序列表使用 flexbox 如此处所述：[1]：查尔斯

页脚内容未显示在移动视图中

Footer content not showing in mobile view

css

mobile

footer