css - 小型デバイスでパネル表示が正しくない Bootstrap 3 レイアウト

Question

Bootstrap 3 を使用して以下のようにレイアウトを調整しますが、iPad (ポートレート) では成功しません。

パネル 3 は、パネル 1 と 2 を覆い隠します。この問題は、このサイズでのみ発生します。

これはバグですか？

<div class="container">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 1</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 1
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 2</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 2
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 3</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 3
            </div>
        </div>
    </div>
</div>
</div>

小さいサイズにサイズ変更すると、 http://bootply.com/76904で問題が発生する可能性があります。

これについて何か考えはありますか？

Answer 1

更新 2

また、お読みください: https://github.com/twbs/bootstrap/issues/10152#issuecomment-23247254 . float:left の代わりに、ビューポートのレスポンシブ ユーティリティ クラスと組み合わせて clearfix を使用する必要があります。参照: http://twbs.github.io/bootstrap/css/#grid (セクション「レスポンシブ列のリセット」)。

したがって、あなたの場合: <div class="clearfix visible-sm"></div>2 番目と 3 番目のパネル列の間に追加します。

アップデート

以下で説明するオーバーラップは、すべての行 div (列) に float:left がある場合には発生しません。

col-xs-12 や col-sm-12 などにはフロートがありません。

したがって、問題を解決するには、float:left を 3 番目の列に追加します。<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="float:left;">

<div class="container">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 1</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 1
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 2</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 2
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="float:left;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-looking-info">
                    <h4>
                        Panel 3</h4>
                </a><small>Panel heading description</small>
            </div>
            <div class="panel-body in" id="panel-looking-info">
                Panel body 3
            </div>
        </div>
    </div>
</div>
</div> 

グリッドについて読む: http://getbootstrap.com/css/#gridまたはhttp://bassjobsen.weblogs.fm/twitters-bootstrap-3-rc2-important-changes/ (簡単な例)

ブートストラップ CSS には 4 つのグリッドがあります (col-xs- で極小、col-sm-で小など)。

グリッドごとに、列の数を合計すると 12 になります。

あなたのコードでは、col-xs / col-sm を 36 まで足してください。

希望に応じて、グリッド クラスを選択する必要があります。

3 つの列 / パネルの場合: 積み重ねない / 常に水平:<div class="col-xs-4">

768px より上の水平:<div class="col-sm-4">

992px より上の水平:<div class="col-md-4">

1200px より上の水平:<div class="col-lg-4">

注意: 同じ ID (パネル検索情報) を 3 回使用します。

twitter ブートストラップのドキュメントにも次のように表示されます。

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div

ここで、col-xs-6 は 50% = 150% の 3 つの div を連続して作成します。

ブーストラップ CSS の有無にかかわらず、これらの例を確認してください。

<div style="width:800px;">
<div style="background-color:yellow;width:50%;float:left;min-height:50px;"></div>
<div style="background-color:orange;width:50%;float:left;min-height:50px;"></div>
<div style="width:100%;">
<div style="height:150px;background-color:navy;"></div>
</div> 
<br>
<div width="800px">
<div style="background-color:yellow;width:50%;float:left;min-height:50px;"></div>
<div style="background-color:orange;width:50%;float:left;min-height:50px;"></div>
<div style="width:100%;position:relative;">
<div style="height:150px;background-color:navy;"></div>
</div>

結果：

2 番目との違いは相対位置です (TB グリッド クラスも相対位置を追加します) が、どちらの場合も要素が重なります。

合計幅が 100% を超えているため、要素が重なり合っており、上部が同じです。

これはバグではないと思います。getbostrap.com のドキュメントは間違っていると思います。