在.row中定位.span的问题

Question

我在使用.row在.span内定位三个列时遇到很多问题。请你看看THIS LINK并让我知道我做错了什么！在这？ 如果你在iPhone 5的横向方向检查页面，你会发现所有的跨度都会在彼此之间排列，但我想先在第一行保留两个。以下是发生的事情：

这就是我想要的：

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

或在iPhone 5纵向视图中，我想将图像居中，但看起来像是：

感谢您的时间

Answer 1

Bootstrap使所有spanX元素在小屏幕中显示为块，因此您可以尝试添加新类以使您的跨度也在小屏幕上浮动，我建议您使用.row-fluid类和浮动您的.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;
    }
}