仅在肖像视图中引导3列包装
我有一个非常简单的布局在一个网站的页脚使用引导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>由于某些原因，在.中，col-xs-1在iPhone上查看时会转到下一行，并且只在纵向视图中。(也就是说.review-author和.应该是并排的)。我还没弄清楚原因。有人能伸出援手吗？
注：-我没有任何其他浏览器或景观模式的问题。-我已经在iPad上试过了，没有任何问题-没有其他样式应用于元素
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2013-08-21 20:13:40
正如@PiLHA建议的那样，引导程序的3网格系统似乎不支持宽度小于360 it的屏幕中的1列跨度。这个问题来自于15px的固定填充，该填充是在每一列的每一侧添加的。
现在用一些数学来解释这个问题：
单列跨度.col-xs-1的定义宽度为：8.333333333333332%; (即100/12)
在一个320 to的屏幕上，就像iPhone一样，这大致相当于27px;，但是合并的填充使它的宽度强制为30px。这些额外的像素导致<div>中断到下一行。
因此，一个简单的解决方法就是减少列大小中的填充：
.col-xs-1 {
padding-left: 5px;
padding-right: 5px;
}或者您也可以决定在标记中使用col-xs-10和col-xs-2。
话虽如此，你应该记下@SeanRyan在他的回复中发布的内容，并修复您的标记，我本来打算发布一些类似的东西，但我相信他的答案布局得很好，没有必要重复相同的提示。
Stack Overflow用户
发布于 2013-08-21 19:55:00
可能是个窃听器。尽管如此，代码的布局还是存在一些一般性问题的。根据我目前对Bootstrap 3网格的理解，这里有一个更干净的方法：
<div class="container">
<div id="reviews" class="row">
<h3 class="col-xs-12"><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 class="review-meta row">
<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>- 删除重复的.container元素。
- 将网格类添加到h3以使其与其他元素保持一致。
- 嵌套行应该属于.col div (至少根据文档)。
我开始认为#3是无意的，因为您不希望嵌套11/1行。如果是这样的话，代码应该更像：
<div class="container">
<div id="reviews" class="row">
<h3 class="col-xs-12"><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>
<div class="review-meta row">
<div class="review-author col-xs-11">Author Name</div>
<div class="add-review col-xs-1 text-center">icon</div>
</div>
</div>我现在无法在iPhone上进行测试，所以我希望这将为您清除这个问题。
https://stackoverflow.com/questions/18365908
复制相似问题
腾讯云开发者
