仅限纵向视图中的Bootstrap 3列包装

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中,当在iPhone上查看时,col-xs-1包裹到下一行 - 并且仅在纵向视图中.(也就是说.review-author和.add-review应该是并排的).我一直无法弄明白为什么.有人能伸出援助之手吗？

注意: - 我在任何其他浏览器或横向模式下都没有问题. - 我在iPad上尝试过没有问题 - 没有其他样式应用于元素

任何帮助,将不胜感激.

Answer 1

正如@PiLHA建议的那样,似乎bootstrap的3网格系统不支持宽度小于约360px的屏幕中的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在他的回答中发布的内容并修复你的标记,我会发布类似的东西,但我相信他的答案布局合理,没有必要重复相同的指示.