css - Bootstrap 3 列仅在纵向 View 中换行

Question

我在网站的页脚中使用 Bootstrap 3 进行了一个非常简单的布局:

<div id="reviews" class="row">
    <div class="container">
        <h3><i class="icon-comment"></i>Review<i class="icon-comment"></i></h3>
        <div class="review col-xs-12">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
        </div>
        <div class="review-meta row">
            <div class="container">
                <div class="review-author col-xs-11">Author Name</div>
                <div class="add-review col-xs-1 text-center"><i class="icon-plus"></i></div>
            </div>
        </div>
    </div>
</div>

出于某种原因，在 .review-meta 中，col-xs-1 在 iPhone 上查看时换行到下一行 - 并且仅在纵向 View 中。 (也就是说 .review-author 和 .add-review 应该是并排的)。我一直无法弄清楚为什么。有人能伸出援手吗？

注意事项: - 我在任何其他浏览器或横向模式下都没有问题。 - 我在 iPad 上试过没有问题 - 没有应用到元素的额外样式

如有任何帮助，我们将不胜感激。

Answer 1

正如@PiLHA 所建议的，bootstrap 的 3 网格系统似乎不支持宽度小于大约 360 像素的屏幕中的 1 列跨度。问题来自 15px 的固定填充在每列的每一侧添加。

现在用一些数学来解释这个问题:

单列跨度 .col-xs-1定义宽度为:8.333333333333332%; (即 100/12)

在像 iPhone 这样的 320px 屏幕中，大致等于 27px;但组合填充迫使其宽度为 30px .那些额外的像素是导致 <div> 的原因跳转到下一行。

所以一个简单的解决方法就是减少该列大小的填充:

.col-xs-1 {
    padding-left: 5px;
    padding-right: 5px;
}

或者您也可以决定使用 col-xs-10和 col-xs-2在你的标记中

话虽如此，您应该记下@SeanRyan 在他的回答中发布的内容并修复您的标记，我本来打算发布类似的内容，但我相信他的回答布局合理，无需重复相同的指示.