html - ブートストラップ流体レイアウトでグリッド要素を下揃えするにはどうすればよいですか？

Question

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/

score 69 · Accepted Answer

これは、CSS /LESSのみを使用するBootstrap3の更新されたソリューションです（ただし、古いバージョンでも機能するはずです）。

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

行のフォントサイズを0に設定し（そうしないと、列の間に厄介なスペースができてしまいます）、列のフロートを削除し、表示をinline-blockに設定し、フォントサイズを再設定してから、次のvertical-alignように設定できます。必要なものは何でも。

jQueryは必要ありません。

score 49 · Accepted Answer

注：Bootstrap 4以降のユーザーの場合は、 Christopheのソリューションを検討してください（Bootstrap 4では、より洗練されたCSSのみのソリューションを提供するflexboxが導入されました）。以下は、以前のバージョンのBootstrapで機能します...

実用的な解決策については、 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など）で再利用可能
それはかなりよくサポートされています（すべての主要なブラウザはmargin-topをサポートしています）

今悪いニュース：

jQueryが必要です
書かれているとおり、レスポンシブではありません（申し訳ありません）

score 36 · Accepted Answer

フレックスを使用できます：

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

score 27 · Accepted Answer

span6次のようなsmthgのスタイルを追加する必要があります。

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

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

score 14 · Accepted Answer

この機能を実装するための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);
        }
      };
    }

score 7 · Accepted Answer

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

margin-top親要素または親要素内の対象の子要素よりも大きい別の要素に高さがある場合の値を計算する必要はありません。

score 4 · Accepted Answer

ここでの他の回答に基づいて、さらに応答性の高いバージョンがあります。Ivanのバージョンから、幅768px未満のビューポートをサポートし、遅いウィンドウサイズ変更をより適切にサポートするように変更を加えました。

!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);

score 4 · Accepted Answer

これはcfxのソリューションに基づいていますが、親コンテナーでフォントサイズをゼロに設定して、表示のために追加された列間スペースを削除するのではなく、インラインブロックしてリセットする必要があります。

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

補正するために列divに。

score 0 · Accepted Answer

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

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

score -3 · Accepted Answer

-3

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

于 2016-07-08T21:31:02.253 に答える

html - ブートストラップ流体レイアウトでグリッド要素を下揃えするにはどうすればよいですか？

10 に答える 10

Related

Reference