4

私は Bootstrap 3 に少し慣れていないので、これが明白に思えない場合はご容赦ください。

私が尋ねようとしていることを理解するのに役立つことを願って、物事を始めるためにjsfiddleを作成しました：http://jsfiddle.net/dwdhj/2/

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            8
            <div class="row">
                <div class="col-sm-4">
                    4 - but want to appear as 6
                </div>
                <div class="col-sm-4">
                    4 - but want to appear as 6
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            4 - full height of screen
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

デザイナーがグリッドを使用する場合 (たとえばhttp://gridpak.com/から)、デザイン全体を通してグリッドに固執します。画面の高さいっぱいになるように右側のパネルを作成する場合、おそらく 4 グリッドを占めることになります。これで 8 が残ります。いい計算ですね。

私の問題:最初の 8 内に新しい行を作成すると、そのコンテナー内のすべてを適切かつ流動的にすることができます。つまり、別の 12 列のグリッドを作成することになります。この新しい 12 列のグリッドは、デザイナーが最初に作業していたグリッドと実際には一致しません。

私の質問:最初に使用した 8 列の div 内でグリッドが同じままになるように作成できますか? おそらくそれはデザイナーがする必要があることでしょうか？

Bootstrap 2 の行流体でこの例をいくつか見ましたが、それは廃止されました-私が読んだことからの正当な理由により。

うまくいけば、それは十分に理にかなっています-明確にする必要がある場合はお知らせください。

4

3 に答える 3

1

さらに調査を行った後、プッシュ/プルを組み合わせて使用​​することで、目的の結果を得ることができることがわかりました。

更新された jsfiddle リンクを確認してくださいhttp://jsfiddle.net/dwdhj/3/

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            Header
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            4 - full height of screen
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
        <div class="col-sm-8 col-sm-pull-4">
            8
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
         </div>
        <div class="col-sm-4 col-sm-pull-4">
             4
        </div>
        <div class="col-sm-4 col-sm-pull-4">
             4 
         </div>     
         <div class="col-sm-3 col-sm-pull-4">
             3
        </div>
        <div class="col-sm-2 col-sm-pull-4">
             2 
         </div>
        <div class="col-sm-3 col-sm-pull-4">
             3
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            Footer
        </div>
    </div>
</div>

基本的に、私の問題は常に新しい行を作成することでしたが、それらを隣り合わせに追加し続ける必要があり、それらが「サイドバー」に到達したときに「プッシュ」を追加して、次の「行」の場所にラップしました。 」が始まっていたでしょう。

これを行うためのより良い方法についてアドバイスをいただければ幸いですが、今のところ機能しています。

于 2013-10-07T09:19:05.633 に答える
1

コメントスレッドでこれに返信しましたが、基本的には別のアプローチを取りました

http://jsfiddle.net/Yjn9V/1/

<div class="container">
    <div class="row">
        <div class="col-sm-12">Header</div>
    </div>
    <div class="row">
    <div class="col-sm-4 col-sm-push-8">4 full height
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>

        <div class="col-sm-8 col-sm-pull-4">
            <div class="row">
                <div class="col-sm-12">12</div>
            </div>
            <div class="row">
                <div class="col-sm-6">6</div>
                <div class="col-sm-6">6</div>
            </div>
            <div class="row">
                <div class="col-sm-6">6</div>
                <div class="col-sm-6">6</div>
            </div>
            <div class="row">
                <div class="col-sm-5">5</div>
                <div class="col-sm-2">2</div>
                <div class="col-sm-5">3</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">footer</div>
    </div>
</div>

非常に単純なレイアウトを使用しているため、ラッパーコンテナーで一度だけ実行できるものに対してあまりにも多くのプッシュ/プルを行っているため、これを試してみます。

それをチェックしてください、これが機能するか、質問がある場合は、ここまたは私のコメントスレッドでお知らせください.

于 2013-10-07T16:59:37.557 に答える