Question

我正在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>&#169; 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;
}

任何想法？

Answer 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>

使用bootstrap 3对内容进行居中

1 个答案: