4

I have a very simple layout going in the footer of a website using 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>

For some reason, in .review-meta, the col-xs-1 wraps to the next line when viewed on an iPhone - and only in portrait view. (Which is to say .review-author and .add-review should be side-by-side). I haven't been able to figure out why. Would anyone be able to lend a hand?

Notes: - I'm having no issues in any other browsers or in landscape mode. - I've tried it on the iPad with no issues - There are no additional styles applied to the elements

Any help would be appreciated.

4

2 回答 2

8

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

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

一列跨度.col-xs-1的定义宽度为：（8.333333333333332%;即 100/12）

在像 iPhone 这样的 320 像素屏幕中，这27px;大致30px等于 那些额外的像素是导致<div>中断到下一行的像素。

因此，一个简单的解决方法是减少该列大小的填充：

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

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

话虽如此，您应该记下@SeanRyan 在他的答案中发布的内容并修复您的标记，我将发布类似的内容，但我相信他的答案已经很好地阐述了，无需重复相同的指示。

于 2013-08-21T20:13:40.073 回答
1

可能是一个错误。话虽如此，代码的布局方式存在一些一般性问题。根据我目前对 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>
  1. 删除了重复的 .container 元素。
  2. 向 h3 添加了网格类以使其与其他元素内联。
  3. 嵌套行应该在 .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 上进行测试，所以我希望这能为您解决问题。

于 2013-08-21T19:55:00.457 回答