Bootstrap 3 - 如何在同一行中使用不同的字体大小,同时对齐底部的所有文本

Question

我是Bootstrap的新手.我想在同一行中有两列文本,但第一列的字体比第二列大得多.当我这样做时,第二列中的文本似乎高于第一行.我希望两列中的文本在底部对齐.

这是现在的样子.注意"亚特兰大"垂直对齐方式高于"John Doe" http://bootply.com/83705

Answer 1

更新

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style=""><span style="font-size:35px;"></span>Atlanta</div>
      </div>
</div>  

-

我不知道你的问题是否与Bootstrap有关(Bootstrap让你的div浮动)所以另请参阅:如何将div的内容对齐到底部？

尝试添加填充？

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style="padding-top:21px;">Atlanta</div>
      </div>
</div>

Answer 2

2种方式我可以想到我的头脑

1:不要使用列,而是使用"display-inline"

.inline { display: inline-block !important; }

根据您的主题,您可能还需要

.align-bottom { vertical-align: bottom !important }

甚至可能有一个bootstrap类.我只能找到这个:

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>

演示:http://www.bootply.com/nba6HcSDll

2st:如果必须使用列,请检查一下

等高柱DEMO:http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height