css - 关于在 .row 中定位 .span 的问题

Question

我在使用 .span 将三列定位在 .row 中时遇到了很多问题，请看一下 THIS LINK让我知道我做错了什么!在这？如果您在 iPhone 5 横向模式下查看页面，您会看到所有跨度都在彼此下方排列，但我想在第一行保留两个。这是发生了什么:

这就是我想要的:

同样在大屏幕上，第三个跨度不适合右端部分:

或者在 iPhone 5 纵向 View 中，我想将图像居中，但它看起来像:

谢谢你的时间

Answer 1

Bootstrap 使所有 spanX 元素在小屏幕上显示为 block ，因此您可以尝试添加一个新类以使您的 span 在小屏幕上也 float ，我也建议您使用 . row-fluid 类并 float 你的 .social-wrap 使其右对齐

HTML

<div class="row-fluid">
    <div class="span2 floatSmall">
        <img />
    </div>
    <div class="span4 floatSmall">
        <!--YOUR .span4 CONTENT-->
    </div>
    <div class="span6">
        <div class="footer-body">
            <div class="social-wrap">
                <ul id="social-networking">
                    <!--YOUR SOCIAL LINKS-->
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.social-wrap {
    float: right;
    /*remove the width you have set*/
}

@media (max-width: 767px){
    .floatSmall {
        width: auto!important;
        float: left!important;
    }
}