web-dev-qa-db-ja.com

Bootstrap 3 Divの下部にテキストを揃える

私はBootstrapのセットアップを取得しようとしています。これは次のようなもので、画像の下部にテキストが配置されています。

================================================
|                                              |
|    ####################                      |
|    ##THIS IS AN IMAGE##                      |
|    ####################   ...And some text!  |
|                                              |
================================================

だから私はこれを試しました：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

しかし、テキストが上揃えになっている次のようなものになります。

================================================
|                                              |
|    ####################  ...And some text!   |
|    ##THIS IS AN IMAGE##                      |
|    ####################                      |
|                                              |
================================================

私はそれを機能させるためにいくつかのポジショニングのトリックを試しましたが、それを行うと、Bootstrapのモバイルファーストネスを壊します。電話サイズに折りたたまれたとき、これにスナップする必要があります：

==========================
|                        |
|  ####################  |
|  ##THIS IS AN IMAGE##  |
|  ####################  |
|                        |
|   ...And some text!    |
|                        |
==========================

したがって、テーブルとして実行することは実際にはオプションではありません。

EDIT：コメントにジョセフ・マリクルの好意によるフィドルがあります：D http://jsfiddle.net/6WvUY/1/

csstwitter-bootstrap-3
42
Pharylon

絶対位置と相対位置の組み合わせを使用するのが最善の策だと思います。

ここにフィドルがあります： http://jsfiddle.net/PKVza/2/

あなたのhtmlを与えられた：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

次のCSSを使用します。

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

編集-モバイルの応答性のためにCSSとJSFiddleを修正し、IDをクラスに変更しました。

60
Cody Reichert

他のSO質問からいくつかのアイデアを集めました（主に here と this css page から）

フィドル

アイデアは、相対位置と絶対位置を使用して行を下に移動することです。

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

display:flexオプションは、現時点では、divをその親と同じサイズにするためのソリューションです。一方、これはbootstrapがcol-sx-12クラスを追加することで小さなデバイスで自動改行する可能性を壊します。 （これがメディアクエリが必要な理由です）

7
Daniel

あなたはこれを行うことができます：

CSS：

#container {
    height:175px;
}

#container h3{
    position:absolute;
    bottom:0;
    left:0;
}

次に、HTMLで：

div class="row">
    <div class="col-sm-6">
        <img src="//placehold.it/600x300" alt="Logo" />
    </div>
    <div id="container" class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>
6
Brandon Nguyen

別の解決策は次のとおりです。 http://jsfiddle.net/6WvUY/7/ 。

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="col-sm-6">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

CSS：

.row {
    display: table;
}

.row > div {
    float: none;
    display: table-cell;
}
3
DRD