Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

css - Bootstrap 3 Column Wraps in Portrait View Only

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...