Bootstrap列未以Mobile为中心

Question

我正在使用Bootstrap为我的个人网站创建一个简单的登录页。我在底部有一排联系人按钮，我将其与列对齐。我在桌面上的设置很好，但在手机上（我使用的是iPhone 5），按钮向右移动了一点。我尝试过不同的断点大小和列的偏移量，但我似乎无法使它们在桌面和移动设备上正确对齐。

这是我的网站

Answer 1

扩展我上面的评论，如果你想在桌面上保持相同的布局，你可以改变按钮的结构，在移动设备上跨越3列，在上面的任何东西上跨越2列：

<div class="row" id="contact">
    <div class="col-xs-3 col-sm-2 col-sm-offset-2">
        <a href="mailto:[e-mail]" target="_top"><img class="contactImg" alt="email" src="images/email.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://www.linkedin.com/profile/view?id=282192735"><img class="contactImg" alt="LinkedIn" src="images/linkedin.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://facebook.com/mattjcoop"><img class="contactImg" alt="Facebook" src="images/facebook.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://twitter.com/TheMattyCoops"><img class="contactImg" alt="Twitter" src="images/twitter.png"></a>
    </div>
</div>