Bootstrap 3将文本对齐到Div的底部

Question

我正试图在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!    |
|                        |
==========================

因此,作为一个表真的不是一个选择.

编辑:这是一个小提琴,由Joseph Marikle在评论中提供:D http://jsfiddle.net/6WvUY/1/

Answer 1

我认为你最好的选择是使用绝对和相对定位的组合.

这是一个小提琴: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更改为类.

Answer 2

你可以这样做:

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>

Answer 3

我从其他SO问题中收集了一些想法(很大程度上来自这里和这个css页面)

小提琴

我们的想法是使用相对和绝对定位将您的线移到底部:

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

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

该display:flex选项目前是使div与其父级具有相同大小的解决方案.另一方面,这会破坏通过添加col-sx-12类在小型设备上自动换行的引导可能性.(这就是需要媒体查询的原因)