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

Question

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

这是它现在的样子的一个例子。注意“亚特兰大”的垂直对齐方式高于名称“John Doe” http://bootply.com/83705

Answer 1

我能想到的 2 种方法

第一：不要使用列，而是使用“display-inline”

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

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

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

甚至可能有一个引导类。我只能找到这个：

引导程序 2.3.2

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

引导程序 3

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

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

2st：如果您必须使用列，请查看此

等高列演示： http: //www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

Answer 2

更新

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