样本

Question

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

问题的提示：http://www.bootply.com/GqKdUa9uxT

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

谢谢，airyt

Answer 1

您可以使用父级div的“position：relative”和子级的“position：absolute”将文本对齐到右侧div的底部，然后您可以通过更改bottom属性的值来调整位置。你的需要。 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/

Answer 2

您无法垂直对齐浮动包装，您需要将其更改为内联元素。

样本

＆＃13;

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

＆＃13;

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

＆＃13;

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

相邻列中的Bootstrap 3垂直对齐文本

2 个答案:

样本