Bootstrap 3 Column Wraps in portrait mode only

I have a very simple layout located in the website footer 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, col-xs-1 wraps the next line when viewed on an iPhone - and only in portrait mode. (That is, .review-author and .add-review should be side by side). I could not understand why. Can anyone lend a hand?

Notes: - I have no problems in any other browsers or in landscape mode. - I tried it on the iPad without any problems - No additional styles applied to the elements

Any help would be appreciated.

+4
source share
2 answers

As @PiLHA showed, it seems that the bootstrap 3 grid system does not support 1 slit column on screens less than about 360 pixels wide. The problem comes from a fixed 15px add-on that is added on each side to each column.

Now a little math to explain the problem:

The radius of one column .col-xs-1 has a certain width: 8.333333333333332%; (it's 100/12)

On a screen with a size of 320 pixels, like an iPhone, approximately equal to 27px; , but the combined fill forces its width to 30px . These extra pixels are the ones that cause the <div> to break to the next line.

Thus, an easy fix would be to simply reduce padding in the size of the column:

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

Or you can also use col-xs-10 and col-xs-2 in your markup

In this case, you should take into account that @SeanRyan posted in his answer and correct your markup, I was going to post something like that, but I believe that his answer is well laid out and there is no need to repeat the same pointers.

+8
source

May be a mistake. However, there are some common problems with the way your code is laid out. Based on my current understanding of Bootstrap 3 mesh, this is a cleaner way:

 <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> 
  • Duplicate .container elements removed.
  • Added grid class for h3 to align it with other elements.
  • The nested line should be inside the .col div (at least according to the docs).

I'm starting to think that # 3 was unintentional because you did not want your line 11/1 to be nested. If so, the code should look larger:

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

I can’t check on the iPhone right now, so I hope this clears the problem for you.

+1
source

Source: https://habr.com/ru/post/1498259/


All Articles