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>

Bootstrap列未在移动设备上居中

1 个答案: