Twitter Bootstrap 3-流体列の高さが等しいパネル
Bootstrap 3を初めて使用し、ランディングページに3つのパネルを同じ高さで配置したいのですが、中央のパネルのコンテンツは少なくなります。サイズを変更すると同じ高さになりますが、最初にページにアクセスしたときではありません。
私はすでにCSSでオーバーフローを隠そうとしましたが、パネルの下部を切り取ってしまいましたが、それは私が望むものではないので、jQueryを使用する必要があると考えています。
ここに私のコードがあります：
<div class="row-fluid">
<!--begin panel 1 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title text-center">Web y Metrícas</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
</p>
<p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
<ul class="text-left">
<li>Web Corporativas</li>
<li>Tiendas Virtuales</li>
<li>Plataformas e-Learning</li>
<li>Arquitectura de Información</li>
<li>Google Analytics, SEO–SEM</li>
<li>Análisis de Competencia Digital</li>
<li>Data Mining</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!--end col-md-4 -->
<!-- begin panel 2 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Gestíon de Redes Socials</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
</p>
<p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
<ul class="text-left">
<li>Compromiso</li>
<li>Publicación</li>
<li>Monitoreo</li>
<li>Analítica</li>
<li>Colaboración</li>
<li>CRM</li>
<li>Movil</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
<!--begin panel 3 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Plan de Medios</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
</p>
<p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
<ul class="text-left">
<li>Asesoría Comunicacional</li>
<li>RR.PP</li>
<li>Presencia de Marca</li>
<li>Clipping Digital</li>
<li>Manejo de Crisis</li>
<li>Lobby</li>
<li>Media Training</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
これは、CSSフレックスボックスを使用して実行できます。最小限のCSSのみが必要です。
.equal {
display: -webkit-flex;
display: flex;
}
.equalを.rowに追加するだけで、flexboxが残りを行います。
http://www.codeply.com/go/BZA25rTY45
UPDATE：Bootstrap 4はflexboxを使用するため、追加の必要はありませんCSS。 http://www.codeply.com/go/0Aq0p6IcHs
bootstrap=グリッドを使用する場合、次のCSSのようなハッキングなしでこれを達成する簡単な方法を見つけるとは思わないでしょう。
これは基本的に言う。画面の幅がブートストラップのmdブレークポイントより大きい場合、すべての要素にpanel-bodyクラスは、列要素の直接の子孫であり、最小の高さは420pxこれは、既存のコンテンツで機能する「マジックナンバー」です。
繰り返しますが、これは本当にグロスな解決策だと思いますが、ピンチで「機能」します。
@media (min-width: 992px) {
.col-md-4 > .panel > .panel-body {
min-height: 420px;
}
}
CSS-Tricksの記事 Fluid Width Equal Height Columns はさまざまな方法をカバーしています（display: table＆flexbox）これを実現します。ただし、この特定のタスクについては、レスポンシブbootstrapグリッドから離れる必要がある場合があります。
また、これは Flexboxの完全ガイド です
ブートストラップのソリューション-このcssを追加し、クラスを行に追加します。
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
http://getbootstrap.com.vn/examples/equal-height-columns/ に投稿されているように、いくつかの警告がありますが、それはあなたのケースには十分だと思われます。
私もこの答えを見ました here 。
列の動的数の更新
ブートストラップは、1行に収まる以上の行を追加すると、自動的に列を新しい行に折り返しますが、これはflexboxアプローチがこれを破ります。flexbox次のようなことができることがわかりました：
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
これは、動的な列数、または画面サイズに応じて幅が変化する列がある場合に便利です。したがって、次のようなものを使用できます。
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
</div>
そして、それはすべて予想通りに並んでいます。気をつけてください-それは新しいブラウザでのみ動作します。 詳細はこちら
私の場合、これらのCSSメソッドのいずれも機能しないことがわかりました。パネルでも画像を使用しています。代わりに、簡単なJQuery関数を使用して作業を完了しました。
window.onload = function resizePanel(){
var h = $("#panel-2").height();
$("#panel-1").height(h); // add a line like this for each panel you want to resize
}
ID「panel-1」と「panel-2」がpanelタグにある場合、hの設定に使用するパネルとして最大のパネルを選択し、htmlの最後で関数を呼び出します。
<body onresize = "resizePanel()">
また、onresize属性を本文に追加してウィンドウのサイズを変更すると関数が呼び出されるようにします
この関数は、最大の.panel-bodyの高さを見つけ、それをすべての.panel-body要素の高さにします。
function evenpanels() {
var heights = []; // make an array
$(".panel-body").each(function(){ // copy the height of each
heights.Push($(this).height()); // element to the array
});
heights.sort(function(a, b){return b - a}); // sort the array high to low
var minh = heights[0]; // take the highest number
$(".panel-body").height(minh); // and apply that to each element
}
すべてのパネル本体が同じになったため、「evenpanels」関数を再度実行する前にウィンドウのサイズを変更するときに高さをクリアする必要があります。
$(window).resize(function () {
$(".panel-body").each(function(){
$(this).css('height',""); // clear height values
});
evenpanels();
});
下部<div>のスタイルで上部と下部のパディングを追加します。
<div class="xxx" style="padding: 8px 0px 8px 0px">
...
</div>
結局のところ、それぞれのケースは異なり、状況に応じて調整する必要があるためです。
Chrome開発ツールは、このような状況で非常に役立ちます。
