Bootstrap列未在移动设备上居中

Question

我使用Bootstrap作为我的个人站点的简单登录页面。我沿着底部有一排接触按钮，我正在与列对齐。我在台式机上的设置很好，但在移动设备上（我使用的是iPhone 5），按钮向右移动一点。我已经尝试了不同的断点大小和列的偏移量，但似乎无法让它们在桌面和移动设备上正确对齐。

Here's my site

Answer 1

扩大对我的评论上面，如果你想保持相同的布局在桌面上，你可以改变按钮的结构跨越上高于任何移动3列和2列：

<div class="row" id="contact"> 
    <div class="col-xs-3 col-sm-2 col-sm-offset-2"> 
     <a href="mailto:matthew_cooper@brown.edu" 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>