Bootstrap 页脚 - 链接 - 社交媒体徽标 - 链接
Bootstrap footer - Links - Social Media Logos - Links
我正在为我的网站制作页脚。我从 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>
我通过将导航栏向右 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>
然后为页脚右添加了一些css:
footer ul.footerright{
margin-right: 150px;
margin-top: 10px;
}
footer ul.footerright li{
display: inline;
margin-right: 25px;
}
我正在为我的网站制作页脚。我从 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>
我通过将导航栏向右 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>
然后为页脚右添加了一些css:
footer ul.footerright{
margin-right: 150px;
margin-top: 10px;
}
footer ul.footerright li{
display: inline;
margin-right: 25px;
}