web-dev-qa-db-ja.com

他の列に従って動的にbootstrap列幅を変更する方法は？

bootstrapに行を作成し、左側にブログコンテンツ用（col-sm-7）とサイドバー用（col）の2つの列を追加したとします。 -sm-5）、右側。

col-sm-5の高さがcol-sm-7の高さよりも低い場合（つまり、ない場合）にcol-sm-7のコンテンツをcol-sm-12に展開する方法はありますか？サイドバーのコンテンツ？：ユーザーがウィジェットを1つだけ追加するとします。問題は、サイドバーが右側全体を占めるため、見栄えがよくないことです。）

これが私の意味を示す画像です：

bootstrap grid, dynamic width question

javascriptjquerycsstwitter-bootstrapdynamic
8
Dexter

前述のように、標準のBootstrapグリッドでこれを行う方法はありません。ただし、CSSを少し調整するだけで、これらの「ルール」を順守することで可能になります。

サイドバーを最初に置き、右に浮かせます。

<div class="col-sm-5 pull-right">
            ..
</div>

col-sm-7 width：autoを作成し、フロートを解除します。

.float-none {
    float: none;
    width: auto;
}

最後に、col-sm-7内の子DIVはoverflow: auto ..である必要があります。

デモ：http://www.codeply.com/go/njEg31ZG

AFAIK、flexboxはこれにはうまく機能しません。

4
Zim

bootstrap（多分bootstrap 4 with flexbox ...））でこれを行う簡単な方法がわかりません-両方のコンテンツセットが非常にあります個別のコンテナ。おそらく、小さなjavascriptとCSSハッカーで実現できますが、お勧めできません。この例のコードはテストされていません。

とにかく、これを行うための1つの潜在的な方法は、サイドバーをブログコンテンツと同じ列に配置し（eugh）、各contentcol-7とsidebarcol-5を作成することです。

この時点で、jQueryを使用して、サイドバーの高さ（たとえば、400）と列の高さ（たとえば、それぞれ100）を比較することにより、サイドバーの下のスペースを埋めるためにcol-12に展開する行を計算できます。 。このようにして、4つのcontentアイテムを合計すると400（サイドバーの高さ）になることがわかります。つまり、4番目の要素以降、クラスをcol-12に変更できます。

var contentItems = $(".content"); // your 'content' items
var sidebar = $(".sidebar");
var contentItemHeight = $(".content").first().height;
var sidebarHeight = $(".sidebar").height;

var smallColumns = sidebarHeight / contentItemHeight; // 4
var $i = 1;

$.each($contents, function(){
  if($i <= smallColumns){
    // Next to sidebar
    $(this).addClass(".col-xs-7");
  }else{
    // Below sidebar
    $(this).addClass(".col-xs-12");
  }
})

// Edited to remove accidental switch to PHP
3
Lewis