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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19057725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:32:32  来源:igfitidea点击:

Bootstrap 3 -- how to use different font sizes in the same row, while aligning all the text at the bottom

csstwitter-bootstraptwitter-bootstrap-3

提问by Alex S

I am new to Bootstrap. I would like to have two columns of text in the same row, but with the first column a substantially bigger font than the second. When I do this, the text in the second column appears to be higher than the first row. I would like the text in both columns to be aligned at the bottom.

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

Here's an example of what it looks like now. Notice "Atlanta" is aligned vertically way higher than the name "John Doe" http://bootply.com/83705

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

回答by Bass Jobsen

update

更新

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

--

——

I don't know if your question has to do with Bootstrap (Bootstrap let your divs float) so see also: How to align content of a div to the bottom?

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

try to add a padding?

尝试添加填充?

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

回答by Tom

2 Ways I can think of on the top of my head

我能想到的 2 种方法

1st: Don't use columns, use "display-inline" instead

第一:不要使用列,而是使用“display-inline”

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

Depending on your theme, you may also need

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

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

There might even be a bootstrap class for that. I could only find this:

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

Bootstrap 2.3.2

引导程序 2.3.2

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

Bootstrap 3

引导程序 3

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

DEMO: http://www.bootply.com/nba6HcSDll

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

2st: If you must use columns, check this out

2st:如果你必须使用列,看看这个

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

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