css - 在 .row 内定位 .span 的问题

Question

我在使用定位三列时遇到了很多问题，.row请.span你看看这个链接，让我知道我做错了什么！在这？如果您在 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;
    }
}