web-dev-qa-db-ja.com

ブートストラップの流体レイアウトでグリッド要素を下揃えにする方法

私はTwitterのブートストラップを使用した流動的なレイアウトを持っています。そこでは、2列の行があります。最初の列にはたくさんの内容が含まれていますが、それらを通常は埋めます。 2番目の列にはボタンとテキストがあるだけです。これを最初の列のセルに対して下揃えにします。

これは私が持っているものです：

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

これが私が欲しいものです：

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

最初のスパンを絶対的な高さにし、それに対して2番目のスパンを配置する解決策を見たことがありますが、divの絶対的な高さを指定する必要がない解決策が好ましいでしょう。私はまた、同じ効果を達成する方法の完全な再考にも寛容です。私は足場のこの使用法と結婚していません、それはちょうど私に最も理にかなっているようでした。

フィドルとしてのこのレイアウト：

http://jsfiddle.net/ryansturmer/A7buv/3/

htmlcsslayouttwitter-bootstrap
119
Ryan

実用的な解決策については http://jsfiddle.net/jhfrench/bAHfj/ を参照してください。

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

プラス面では：

  • Bootstrapの既存のヘルパークラス の精神の中で、私はクラスの名前をpull-downとしました。
  • 「プルダウン」されている要素だけを分類する必要があるので、...
  • ...さまざまな要素タイプ（div、span、section、pなど）に再利用できます。
  • それはかなりよくサポートされています（すべての主要ブラウザはマージントップをサポートしています）

今は悪いニュースです。

  • jQueryが必要です
  • 書かれているとおり、反応がよくない（すみません）
50
Jeromy French

これは、CSS/LESSのみを使用するBootstrap 3（古いバージョンでも動作するはずです）の最新の解決策です。

http://jsfiddle.net/silb3r/0srp42pb/11/

行のfont-sizeを0に設定し（そうでなければ、列の間に厄介なスペースができます）、次に列のfloatを削除し、displayをinline-blockに設定し、それらのfont-sizeを再設定し、そしてvertical-alignを必要なものに設定してください。

JQueryは必要ありません。

68
cfx

あなたはflexを使うことができます：

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}
31
Christophe

span6のスタイルをいくつか追加する必要があります。

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

これがあなたのフィドルです。 http://jsfiddle.net/sgB3T/

27
Lukas

これは、この機能を実装するためのangularjsディレクティブでもあります。

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }
14
Ilya Schukin

ここに他の答えに基づいて、さらに敏感なバージョンです。私は、幅が768ピクセル未満のビューポートをサポートし、遅いウィンドウサイズのサポートを改善するために、Ivanのバージョンから変更を加えました。

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);
4
bbodenmiller

親をdisplay:flex;に、子をmargin-top:autoに設定するだけです。これは、親要素の高さが子要素より大きいと仮定して、子コンテンツを親要素の下部に配置します。

親要素の高さ、または親要素内で関心のある子要素よりも大きい別の要素の高さがある場合、margin-topの値を計算して試す必要はありません。

4
Wagtail

これはcfxの解決策に基づいていますが、表示によってインライン追加された列間スペースを削除するために親コンテナでフォントサイズをゼロに設定するのではなく、単純に追加しました。

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

補うために列divに。

3
Kirtlander

まあ、私はそれらの答えのどれも好きではなかった、同じ問題の私の解決策はこれを追加することでした：<div>&nbsp;</div>。ですから、あなたの計画では（多かれ少なかれ）このようになります。私の場合はスタイルの変更は必要ありませんでした。

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
0
jan b