web-dev-qa-db-ja.com

同じ高さの列bootstrap 3 row responsive

こんにちは、bootstrap行に4つのdivがあります。この行のすべてのdivに同じ高さを持たせ、責任を破らないようにします。責任を破らずにこれを行う方法はわかりません。

高さを固定してこれを解決しようとしましたが、応答性の点でこれは悪い解決策です。

ありがとう:-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3
34
user3279494

これを実現するには、javascriptを使用します。 4つのdivの最大の高さを調べて、すべてを同じ高さにします。

コードは次のとおりです。

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});
64
paulalexandru

ある時点で 公式の実験例 Bootstrapで CSS flexbox を使用して同じ高さの列がありました。その要点は次のとおりです。

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

そして、<div class="row row-eq-height"> の代わりに <div class="row">。

IE <10では、flexboxはサポートされていません。

21
cvrebert

参考-ブートストラップのブレークポイントと一致するレスポンシブブレークポイントを含めるように問題を解決するためにこれを行いました。 （bootstrap=からのLESS変数を使用してブレークポイントを同期しますが、以下はコンパイルされたcssバージョンです）

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

次に、必要なクラスを親に追加しました。

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>
8
FourLeafCleaver

編集1：私はそれで誰かを助けなければならなかったので、私は plunkr を作りました。 「script.js」に移動し、「bootstrap_equalizer（）;」とコメントします同じ高さの列なしで、元のブートストラップを見る機能。

私はこれが少し遅いことを知っていますが、それはあなたのコードを改善し、他の人を助けることができると確信しています！ :)

Foundation 5での作業に慣れているため、bootstrap=.

いくつかの列を「イコライズ」する必要があるページで呼び出す小さな関数を作成します。私のコードは@paulalexandruレスポンスに基づいています！

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

Html側では、これを行う必要があります。

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

列1と列2は同じ高さです！もちろん、2つ以上の列を持つことができます！

これが役立つことを願っています！ =）

5
maxime1992

display:tableプロパティを利用できます：

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

例

更新

人々はこれがブートストラップを壊すのでこれを支持しているように見えるので、実際にbootstrapが使用するものに異なるクラスを持つ要素をターゲットにする必要があります。 bootstrap-上記のコードでは、table-rowの別のクラスを行に追加する場合、次のスタイルを使用できます。

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

例

2
Pete

行内の各列が同じ高さであるという同じような状況がありました。上記の答えを少しのトリックで考慮することにより、ウィンドウのサイズ変更の問題も簡単に実装および解決できました。

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

ここでデモを確認してください- https://jsfiddle.net/3Lam7z68/ （各div列のサイズの変化を確認するために出力ペインのサイズを変更します）

2
Nirav Varma

同じ列の高さを持ち、応答性を損なわないようにするには、これを試してください：

https://github.com/liabru/jquery-match-height

「JQuery」を使用します。今まで、私にとって、それは世の中の最も簡単な解決策です。

1
Omar Gonzales

Bootstrapの実験 、@ cvrebertが述べたように、Microsoft Internet Explorer（バージョン11）およびMozilla Firefox（バージョン37）では動作しますが、Google Chrome（バージョンでは動作しません） 42、64ビット）。

@cvrebertと@Maximeの回答に触発されて、私はこのソリューションを思いつきました。これらの3つのブラウザーで動作します。私はそれを共有することに決めたので、多分他の人もそれを使うことができます。

HTMLに次のようなものがあるとします。

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

これをJSに追加します。

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

jQuery の 。outerHeight（） 関数を使用して、内側のdivの高さを計算および設定します。

また、私はこれをCSSに追加しましたが、これが役立つかどうかはわかりませんが、確かに害はありません：

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
1
Antonio Vinicius Menezes Medei

Reactのこのソリューションのためにここに来ている人のために、ここにあります：

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.Push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

次に、列に：

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

楽しい ;）

0
Emidomenge

私はゲームに少し遅れていますが、....

これにより、「row-height-matched」クラスの行のアイテムの高さが揃えられます。トップ値に基づいてセルが一致するため、ページが小さくなったときにセルが下に移動しても、高さは設定しません。

多くのCSSバージョンがあることは知っていますが、それらはすべて私のレイアウト設計を壊します。

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.Push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})
0
Beakie

すべてのdivの高さを同じにするには、内側のdivに固定の高さを指定する必要があります（div class = "well"）。

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

このリンク demo をたどることができます。

0
shan

応答性を損なうことのない純粋なCSSソリューションに興味がある人は、これでうまくいきました（「行」クラスが明確になり、干渉しないようにするクラス「row-eq-height」を追加したことに注意してくださいbootstrapcssおよび 'xs'の 'md'を変更して、デモでより適切にチェックするようにしました）。

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>

css：

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

デモを確認できます こちら

0
gugol

Paulalexandruの答えはかなり良いと思います。ウィンドウのサイズが変更されたときのトラブルを避けるために、コードをいくつか追加するだけです。最大の高さのdivに写真が含まれている場合、画像の幅が変わると問題が発生する可能性があります。高さも変わるため、この場合はresizeeventに対処する必要があります。

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}
0
Luis González