Bootstrap 3列包裹在仅纵向视图中 [英] Bootstrap 3 Column Wraps in Portrait View Only

问题描述

我有一个非常简单的布局使用Bootstrap 3的网站页脚：

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>

由于某种原因，在.review-meta中，col-xs-1会换行当在iPhone上查看 - 并且只在纵向视图。 （也就是说.review-author和.add-review应该并排）。我没有能够弄清楚为什么。是否有人能够借钱？

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?

注意：
- 我在其他任何浏览器或横向模式中都没有问题。
- 我在iPad上试过没有问题
- 没有额外的样式应用到元素

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

任何帮助将不胜感激。

推荐答案

正如@PiLHA建议的，bootstrap的3个网格系统不支持宽度小于约360px。问题来自于在每一列的每一侧添加的 15px 的固定填充。

As @PiLHA suggested, it seems bootstrap's 3 grid system does not support 1 column spans in screens with a width less than approximately 360px. The issue comes from the fixed padding of 15px that is added on each side to each column.

现在有一些数学解释问题：

Now some math to explain the issue:

一栏span .col -xs-1 具有定义的宽度： 8.333333333333332％; （这是100/12）

A one column span .col-xs-1 has a defined width of: 8.333333333333332%; (that's 100/12)

在像iPhone那样的大约等于 27px; 的320像素的屏幕中，但组合填充将其宽度强制为 30px 。这些额外的像素是导致< div> 断开到下一行的那些额外的像素。

In a screen of 320px like the iPhone's that's roughly equal to 27px; but the combined padding is forcing its width to 30px. Those extra pixels are the ones causing the <div> to break to the next line.

修复将减少列大小的填充：

So an easy fix would be to just decrease the padding in that column size:

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

或者你也可以决定使用 col-xs -10 和 col-xs-2

Or you could also decide to use col-xs-10 and col-xs-2 in your markup

你应该记下@SeanRyan在他的答案中发布了什么，并解决你的标记，我会发布类似的东西，但我相信他的答案是很好的布局，没有必要重复相同的指针。

That being said, you should take a note on what @SeanRyan posted in his answer and fix your markup, I was going to post something similar but I believe his answer is well laid out and there's no need to repeat the same pointers.

这篇关于Bootstrap 3列包裹在仅纵向视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！