【问题标题】：Bootstrap 3 vertical align text in neighboring colsBootstrap 3垂直对齐相邻列中的文本
【发布时间】：2015-12-13 09:56:06
【问题描述】：

问题是我试图在引导程序 3 行中的相邻 div 中垂直对齐文本，其中一个单元格具有不同大小的文本。相邻单元格中的文本沿顶部对齐，但我需要它沿底部对齐。

解决问题：http://www.bootply.com/GqKdUa9uxT

是的，我已经搜索过，但令人惊讶的是没有找到足够的答案： vertical-align with Bootstrap 3 例如，因为我试图对齐文本，而不是 div，所以没有帮助。

谢谢，艾里特

【问题讨论】：

你想让第二列在底部垂直对齐，对吧？
@Arvaan - 是的。无论文本的高度/大小如何，我都需要让所有文本的底部在行中的所有单元格中对齐。

标签： css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

【解决方案1】：

你不能垂直对齐浮动包装器，你需要将其更改为内联元素。

演示

.col-sm-6 {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Here is some text (Text A) <span style="font-size: 40px">Text B</span>
    </div><div class="col-sm-6">
      This text needs to be (bottom) aligned with Text A in previous cell.
    </div>
  </div>
</div>

不要使用 .col-sm-6，因为这会覆盖引导网格系统，请给它另一个名称

【讨论】：

感谢您的回复。我可以看到它在你的代码 sn-p 中工作，但不是在我的代码中：bootply.com/kbV3mpTfbQ 抱歉 - div 不需要浮动才能在 bs 网格系统中加注星标吗？

【解决方案2】：

您可以通过对父 div 使用“position:relative” 对子 div 使用“position:absolute” 来将文本与右 div 的底部对齐，然后您可以通过更改底部属性的值来调整位置你的需要。 HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Here is some text (Text A) <span style="font-size: 40px">Text B</span>
    </div>
    <div class="col-sm-6 bottom-align">
      This text needs to be (bottom) ed with Text A in previous cell.
    </div>
  </div>
</div>

和 CSS 样式：

  .row {
      position: relative;
  }

  .bottom-align {
    position: absolute;
    bottom: 0px;
    right: 0;
    border-bottom: 1px solid red;  
  }
.border{
    border-bottom: 1px solid blue; 
}

请检查小提琴：

http://jsfiddle.net/johannesMt/craLuLpb/

【讨论】：

关闭！但第二个单元格中的文本实际上低于第一个单元格中的文本。我想要实现的是让第二个单元格的文本底部与第一个单元格中所有文本的底部完美对齐。
那么你可以调整“bottom”属性的值，否则左边的文本会有不同的行高和字体大小。