我正在http://www.saleshuddlegames.com
创建一个小型目标网页 桌面上的一切都很好但是当我开始使用平板电脑和智能手机时,一切都开始变得不协调。我似乎无法集中精力。具体看看我的.footer
<footer>
<div class="row">
<div class="col-md-4 col-sm-10 col-sm-offset-2 col-xs-12 centered">
<ul class="social navbar-nav">
<li class="social-item"><a href="http://www.facebook.com/saleshuddle" target="_blank"><i class="fa fa-facebook fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.instagram.com/saleshuddle" target="_blank"><i class="fa fa-instagram fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.youtube.com/saleshuddleacademy" target="_blank"><i class="fa fa-youtube fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.twitter.com/saleshuddle" target="_blank"><i class="fa fa-twitter fa-3x"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright col-md-6 col-md-offset-4 col-sm-10 col-sm-offset-2 col-xs-12">
<p>© 2013. The Training Game is property of <a href="http://www.thesaleshuddle.com" target="_blank">Sales Huddle Group, Inc.</a></p>
</div>
</div>
</footer>
我使用了之前帖子的中心片段:
.centered {
float:none;
margin: 0 auto;
}
任何想法?
答案 0 :(得分:1)
您是否尝试过使用bootstrap中的text-center
类?
我已经为社交图标选择了列,并将其全部删除了版权文本..现在,这在所有浏览器尺寸上看起来都不错:
<footer>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12 text-center">
<ul class="social navbar-nav">
<li class="social-item"><a href="http://www.facebook.com/saleshuddle" target="_blank"><i class="fa fa-facebook fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.instagram.com/saleshuddle" target="_blank"><i class="fa fa-instagram fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.youtube.com/saleshuddleacademy" target="_blank"><i class="fa fa-youtube fa-3x"></i></a></li>
<li class="social-item"><a href="http://www.twitter.com/saleshuddle" target="_blank"><i class="fa fa-twitter fa-3x"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright text-center">
<p>© 2013. The Training Game is property of <a href="http://www.thesaleshuddle.com" target="_blank">Sales Huddle Group, Inc.</a></p>
</div>
</div>
</footer>