Html 强制引导固定页脚内的图像在手机分辨率上水平对齐
我正在尝试将社交图像水平放置在手机上,在更高分辨率下效果很好,但当我切换到手机分辨率时,图像会垂直对齐,并将页脚延伸到内容上,代码如下所示:Html 强制引导固定页脚内的图像在手机分辨率上水平对齐,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试将社交图像水平放置在手机上,在更高分辨率下效果很好,但当我切换到手机分辨率时,图像会垂直对齐,并将页脚延伸到内容上,代码如下所示: <!-- Footer --> <footer> <nav id="top-nav" class="navbar navbar-inverse navbar-fixed-bottom custom-footer"> <div class="container ">
<!-- Footer -->
<footer>
<nav id="top-nav" class="navbar navbar-inverse navbar-fixed-bottom custom-footer">
<div class="container ">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img id="logo-fot" alt="BeBandSM" src="img/logo-fot.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img class="social-media-img" src="img/facebook.png" alt=""></a></li>
<li><a href="#"><img class="social-media-img" src="img/google_plus.png" alt=""></a></li>
<li><a href="#"><img class="social-media-img" src="img/twitter.png" alt=""></a></li>
<li><a href="#"><img class="social-media-img" src="img/youtube.png" alt=""></a></li>
</ul>
</div>
</nav>
</footer>
结果:
高分辨率。
电话资源
如何修复它?将引导浮动css类“向左拉”添加到每个列表元素中应该可以做到这一点,例如:
<ul class="nav navbar-nav navbar-right">
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/facebook.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/google_plus.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/twitter.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/youtube.png" alt=""></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/facebook.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/google_plus.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/twitter.png" alt=""></a></li>
<li class="pull-left"><a href="#"><img class="social-media-img" src="img/youtube.png" alt=""></a></li>
</ul>