Bootstrap 页脚 - 链接 - 社交媒体徽标 - 链接答案

【问题标题】：Bootstrap footer - Links - Social Media Logos - LinksBootstrap 页脚 - 链接 - 社交媒体徽标 - 链接
【发布时间】：2015-12-13 13:21:12
【问题描述】：

我正在为我的网站制作页脚。我从 font-awesome 添加了社交媒体徽标并将其放在页脚的中间。当我添加链接时，徽标不再位于中间，您看不到右侧的链接。我对 HTML/CSS 比较陌生，我不知道如何解决它。我应该怎么改变它在第二张图片中的样子？以及如何将 CSS 文件中的“px”更改为在每台显示器上看起来都相同的“%”？

对不起，如果我的英语不是最好的，在此先感谢。 :)

长什么样子

应该是什么样子

我的代码：

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 40px;
  background-color: #999999;
}
footer ul.footerleft{
    margin-left: 150px;
    margin-top: 10px;
}
footer ul.footerleft li{
    display: inline;
    margin-right: 25px;
}
footer a{
    color: #222;
}

footer a:hover{
    color: #ffffff;
    text-decoration: none;    
}
.social:hover {
     -webkit-transform: scale(1.0);
     -webkit-transition-duration: 0.5s;
 }
 .social {
     -webkit-transform: scale(0.8);
     color: #222;
     
 }

<!-- footer -->
    <footer class="footer">
        <nav class="navbar navbar-default navbar-custom">
            <div class="container-fluid">
                <div class="nav navbar-nav navbar-left">
                    <ul class="footerleft">
                        <li>
                            <a href="">Link 1</a>                   
                        </li>
                        <li>
                            <a href="">Link 2</a>                    
                        </li>
                        <li>
                            <a href="">Link 3</a>
                        </li>
                    </ul>
                </div>

                <div class="text-center center-block">
                    <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                    <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                    <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                    <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
                </div>
                <div class="nav navbar-nav navbar-right">
                <ul>
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            </div>
            
        </nav>
    </footer>

【问题讨论】：

jsfiddle.net 中包含所有代码和资源的 jsfiddle 会更有帮助。

标签： html css twitter-bootstrap footer

【解决方案1】：

我通过将 navbar-right div 移到顶部来让它工作。

<footer class="footer">
    <nav class="navbar navbar-default navbar-custom">
        <div class="container-fluid">
            <div class="nav navbar-nav navbar-right">
                <ul class="footerright">
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            <div class="nav navbar-nav navbar-left">
                <ul class="footerleft">
                    <li>
                        <a href="">Link 1</a>
                    </li>
                    <li>
                        <a href="">Link 2</a>
                    </li>
                    <li>
                        <a href="">Link 3</a>
                    </li>
                </ul>
            </div>

            <div class="text-center">
                <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
            </div>

        </div>

    </nav>
</footer>

然后为footerright添加了一些css：

footer ul.footerright{
        margin-right: 150px;
        margin-top: 10px;
    }
    footer ul.footerright li{
        display: inline;
        margin-right: 25px;
    }

【讨论】：