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

我从其他SO问题中收集了一些想法（主要来自here和this css page）

Fiddle

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

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

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

目前display:flex选项是使div与其父级获得相同大小的解决方案。另一方面，通过添加col-sx-12类，可以打破在小型设备上自动换行的自举功能。（这就是需要媒体查询的原因）

Answer 3

你可以这样做：

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 4

这是另一种解决方案：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;
}

Answer 5

我测试的最简单方法是添加<br>，如下所示：

<div class="col-sm-6">
    <br><h3><p class="text-center">Some Text</p></h3>
</div>

唯一的问题是当屏幕变小并堆叠时会产生额外的换行符（由<br>生成）。但它快速而简单。

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

5 个答案: