3

私はこれで何が起こっているのかをかなり長い間理解しようとしてきましたが、うまくいきませんでした。私が達成しようとしていることの最も基本的な例からコードを削除しましたが、列が重なり合ってスタックしていない理由を理解できません。

失敗した jfiddle はここにあります。 http://jsfiddle.net/rB9Md/

 <div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">
            <div style="border:1px solid black; min-width:400px; width:400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid red; min-width:400px; width: 400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid green; min-width:400px; width: 400px">
                span4
            </div>
        </div>
    </div>
</div>

列が期待どおりに積み上げられないのはなぜですか?? さまざまな場所で幅、最大幅、最小幅のさまざまなバリエーションを試しましたが、成功しませんでした。span4 列がコンテンツ セットの幅よりも小さくなると、スタックされると思います....

4

1 に答える 1

4

http://jsfiddle.net/ZRpSZ/1/

この場合、回避できる場合はスタイルmin-widthを使用したくありません。width

Bootstrapspan4はすでにその列を画面幅の 33% (4/12) にするか、画面幅が小さすぎる場合は折りたたむ予定です。ブートストラップを使用する場合、グリッド システムを使用して列をできる限りレイアウトします。参考までに、こちらをご覧ください。

列の幅を常に 400px にする必要がある場合、ほとんどの画面幅で列を並べて表示することはできません。したがって、どの程度の応答性を望むかを検討する必要があります。

デフォルトの Bootstrap グリッド システムは 12 列を使用し、レスポンシブ機能が有効になっていない幅 940 ピクセルのコンテナーを作成します。レスポンシブ CSS ファイルを追加すると、ビューポートに応じてグリッドが 724px および 1170px 幅に適応します。767 ピクセルのビューポートより下では、列が流動的になり、垂直に積み上げられます。

列が積み重なっている場合、max-width:400pxその幅だけを維持するように設定できます。

于 2013-07-24T14:43:30.177 に答える