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在他的回答中发布的内容并修正你的标记，我会发布类似的内容，但我相信他的答案布局合理，没有必要重复相同的指示

Answer 2

可能是个错误。话虽如此，但代码的布局存在一些常见问题。基于我目前对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上进行测试，所以我希望这能为您解决问题。

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

2 个答案: