Bootstrap 3将文本对齐到Div的底部 [英] Bootstrap 3 Align Text To Bottom of Div

问题描述

我试图在Bootstrap中设置一个看起来像这样的文本，其中文本与图像底部对齐：

I'm trying to get a setup in Bootstrap that would look something like this, where I have text aligned with the bottom of an image:

================================================
|                                              |
|    ####################                      |
|    ##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>

但是我最终看起来更像这样，其中文本是顶部对齐的： / p>

But I end up with something that looks more like this, where the text is top-aligned:

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

我尝试了一些定位技巧来让它工作，但当我这样做，它打破了Bootstrap的移动优先性。当折叠到手机大小时，我需要它缩小到此：

I've tried a few positioning tricks to get it to work, but when I do that, it breaks the mobile-firstness of Bootstrap. When collapsed down to phone-size, I need it to snap to this:

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

这样做一个表真的不是一个选项。

So doing it as a table really isn't an option.

编辑由Joseph Marikle在评论中提供：D http://jsfiddle.net/6WvUY/1/

Here's a fiddle, courtesy of Joseph Marikle in the comments :D http://jsfiddle.net/6WvUY/1/

推荐答案

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

I think your best bet would be to use a combination of absolute and relative positioning.

这是一个小提琴： 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;
  }
}

EDIT - 修正CSS和JSFiddle的行动装置回应将ID标识为类。

EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.

这篇关于Bootstrap 3将文本对齐到Div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！