4

一部の人にとって、これは当然の質問のように思えるかもしれませんが、レスポンシブ グリッドで多目的なスパン コンテンツを配置するためのベスト プラクティスは何ですか? 単純にピクセルの高さを設定できることは知っていますが、そのようなことは、物事の応答性を維持するという目的を無効にしないでしょうか?

たとえば、次のスクリーンショットをご覧ください。

可変スパン コンテンツ

<div class="container">
    <div class="row">
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra non, egestas sit amet nulla.</p></div>
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra.</p> </div>
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero.</p> </div>
    </div>    
</div>

関連する JSfiddleはこちらで見つけることができます。

注: この JSFiddle では何らかの理由で応答性が損なわれているようですが、私自身の Twitter Bootstrap アプリケーションでは問題なく動作します。

4

2 に答える 2

5

私が取り組んだ Web サイトであるDigitalLabsを見て、プロファイルを見てみると、同様のエラーに遭遇しました。すべて同じ高さにしたかったのです。

ここで私の JSFiddle を参照してください: http://jsfiddle.net/LDtRr/2/

(一番下までスクロールしてサイズ変更を押すと、動的にサイズが変更されます)

高さを修正するために JavaScript を使用しました。使用したコードを示します。

function resize(resize, resizeinner) {
var max = 0;

//reset height back to 0
$(resize).each(function(index, element) {
    $(element).css({ 'height' : '0' });
});

//find height of the profiles
$(resizeinner).each(function(index, element) {
    var height = $(element).height();
    console.log('    height=' + height);
    if(height > max) {
        max = height;
    }

});

//set the height dynamically based on the maximum so they are all uniform
$(resize).each(function(index, element) {
    $(element).css({ 'height' : max });
    console.log('    resizedTo=' + $(element).height());
});

console.log('max - ' + max);
}

次に、私が使用したhtmlについて

<div class="span4">
    <div class="well profile">
        <div class="profile-resize">
            <!-- content -->
        </div>
     </div>
 </div>

コードが行うことは、プロファイル クラスで div の最大の高さを取得し、そのクラスのすべての div を最大の高さに設定することです。これをウィンドウのサイズ変更にバインドして、ウィンドウで高さを自動的にサイズ変更することもできます。 .

$(window).load(function() { 
//initially size the elements
resize('.profile', '.profile-resize');
});

おそらく最もエレガントな解決策ではないかもしれませんが、当時はもっと良い解決策が思いつきませんでした。

于 2012-11-20T20:25:09.113 に答える
2

あなたのマークアップは、ブートストラップ ドキュメント ( .container > .row > .span > .well) で推奨されている階層を維持していませんが、絶対配置について考えたことはありますか? JSは関係ありません。

デモ (jsfiddle)

<div class="container" style="position: relative;">
    <div class="row faux-row">
        <div class="span3 well"></div>
        <div class="span3 well"></div>
        <div class="span3 well"></div>
    </div>
    <div class="row vrai-row">
        <div class="span3"><p>...</p></div>
        <div class="span3"><p>...</p></div>
        <div class="span3"><p>...</p></div>
    </div>
</div>

.vrai-row { position: relative;z-index: 101; }

.faux-row { position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 100; }
.faux-row .well {
    height: 100%;
    /* The following is because .span* elements should not have paddings, margins nor borders see http://stackoverflow.com/a/11299934/1478467 */
    box-sizing: border-box;
}

パディング、マージン、ボーダー(実際にスペースを取るスタイル) を設定する場合は、列自体ではなく、たとえば列の子に適用する必要があります。

欠点は、（デモのように）応答しないグリッド（流動的または静的）に固執する必要があることです。ただし、メディア クエリにカプセル化されたいくつかのルールで動作するはずです。

アップデート

.wellすべてのスパンでクラスを維持すれば、応答性を得るのは実際にはそれほど難しくありません。

デモレスポンシブ (jsfiddle)

@media (max-width: 767px) {
    .faux-row { display: none!important; }
}
@media (min-width: 768px) {
    .vrai-row .well { /* Deactivate well styles */
      background-color: transparent;
      border-color: transparent;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    }
}
于 2012-11-20T23:39:25.497 に答える