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

问题描述

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

<div class="容器"><h3><i class="icon-comment"></i>Review<i class="icon-comment"></i></h3><div class="review col-xs-12"><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquamerat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerciation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class="review-meta row"><div class="容器"><div class="review-author col-xs-11">作者姓名</div><div class="add-review col-xs-1 text-center"><i class="icon-plus"></i></div>

出于某种原因，在 .review-meta 中，col-xs-1 在 iPhone 上查看时会换行到下一行 - 并且仅在纵向视图中.(也就是说 .review-author 和 .add-review 应该并排).我一直无法弄清楚为什么.有人可以帮忙吗?

注意事项:- 我在任何其他浏览器或横向模式下都没有问题.- 我在 iPad 上试过没有问题- 元素没有附加样式

任何帮助将不胜感激.

解决方案

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

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

一列跨度 .col-xs-1 的定义宽度为:8.333333333333332%;(即 100/12)

在像 iPhone 一样的 320px 屏幕中，它大致等于 27px; 但组合填充迫使其宽度为 30px.那些额外的像素会导致

中断到下一行.

所以一个简单的解决方法是减少该列大小的填充:

.col-xs-1 {左边距:5px；padding-right: 5px;}

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

话虽这么说，你应该记下@SeanRyan 在他的回答中发布的内容并修复你的标记，我本来打算发布类似的内容，但我相信他的回答已经很好了，没有必要重复相同的提示.

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.

解决方案

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:

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

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;
}

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

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 Column Wraps 仅在纵向视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！