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

对此仍然很陌生，所以提前道歉。

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

景观

但是在移动人像中，社交媒体图标不见了，我哪里出错了？

纵向视图

页脚的 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;
}

任何帮助将不胜感激！

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

您的问题是您的社交图标太大，因此整个<ul>都换行到下一行，但由于您在<footer>上定义了高度，因此它落在视口之外。尝试使图标变小，或者对<p>执行一些操作，使其文本以较窄的宽度换行两行。

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

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

这可能会有所帮助。

您可能想要查看的另一种方法是将弹性框用于无序列表如下所述： [1]：带有无序列表的弹性框查尔斯

相关内容

最新更新

热门标签：