我使用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上试过没有问题
– 没有其他样式应用于元素
任何帮助,将不胜感激.
解决方法
正如@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在他的回答中发布的内容并修复你的标记,我会发布类似的东西,但我相信他的答案布局合理,没有必要重复相同的指针.
