web-dev-qa-db-ja.com

Bootstrap 3：列の内容を行の下に揃える方法

Bootstrap 3と3列でその行に行があります。2つの列を行の一番下に揃え、最初の列を一番上に保ちたいです。親の相対的な位置と両方の列の絶対的な位置を使用する従来のアプローチ私は、Twitterブートストラップの何かが原因であると思う奇妙な動作を取得します。

http://www.bootply.com/125735

絶対的な力ですべての列を互いの上に配置しますが、誰か助けてくれますか？最終結果は次のようになります。

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

ありがとう

csscss3twitter-bootstraptwitter-bootstrap-3
28
user1347026

Display：table-cellとvertical-align：bottomを、下に揃える2列で使用できます。

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

作業例 こちら 。

また、これは 重複した質問 の可能性があります。

40
Marius Stănescu

底を垂直に揃えてフロートを削除すると機能するようです。その後、マージンの問題が発生しましたが、-2pxによりプッシュダウンが防止されます（そして、まだ重複していません）

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

ここの例： http://www.bootply.com/125740#

7
Tom Prats

ブートストラップを使用する場合、通常3つの主な問題に直面します。

  1. 列の内容を一番下に配置する方法は？
  2. 1つの.rowに同じ高さの列の複数行ギャラリーを作成する方法は？
  3. 合計幅が12未満で、残りの幅が奇数の場合、列を水平方向に中央揃えするにはどうすればよいですか？

最初の2つの問題を解決するには、この小さなプラグインをダウンロードしてください https://github.com/codekipple/conformity

3番目の問題はここで解決されます http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

共通コード

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1.列のコンテンツを下に揃える

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2.高さが等しい柱のギャラリー

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3.列の中央への水平方向の配置（12列単位未満）

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

すべてのクラスが連携して機能します

<div class="row row-conformity row-centered">
    ...
</div>
4
Vlad Alivanov

理由はわかりませんが、マリウス・スタネスクによって提案された解決策は、colの特異性を壊しています（col-md-3の後にcol-md-4が12行すべてを取ります）

私は別の実用的なソリューションを見つけました：

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}
2
Antt