4

Bootstrap 3 を使用して、Web サイトのフッターに非常に単純なレイアウトを配置しています。

<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 では、iPhone で表示すると、col-xs-1 が次の行に折り返されます (縦向き表示のみ)。(つまり、.review-author と .add-review は並べて配置する必要があります)。私は理由を理解することができませんでした。誰か手を貸してくれませんか？

注: - 他のブラウザやランドスケープ モードでは問題はありません。- 問題なく iPad で試しました - 要素に適用される追加のスタイルはありません

どんな助けでも大歓迎です。

4

2 に答える 2

8

@PiLHA が示唆したように、ブートストラップの 3 グリッド システムは、幅が約 360px 未満の画面で 1 列スパンをサポートしていないようです。15pxこの問題は、各列の両側に追加される固定パディングに起因します。

問題を説明するための数学：

1 列スパン.col-xs-1の幅は次のように定義されています: 8.333333333333332%;(つまり 100/12)

iPhone のような 320 ピクセルの画面では、ほぼ等しい27px;ですが、結合されたパディングにより幅が に強制され30pxます。これらの余分なピクセルが原因で<div>、次の行に分割されます。

したがって、簡単な修正は、その列サイズのパディングを減らすことです。

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

または、マークアップでcol-xs-10andを使用することもできますcol-xs-2

そうは言っても、@SeanRyanが彼の回答に投稿した内容に注意してマークアップを修正する必要があります。私は同様のものを投稿するつもりでしたが、彼の回答はうまくレイアウトされており、同じポインターを繰り返す必要はないと思います.

于 2013-08-21T20:13:40.073 に答える