css - Bootstrap 3 Column Wraps in Portrait View Only

Question

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.

Answer 1

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.