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
Bootstrap 3 -- how to use different font sizes in the same row, while aligning all the text at the bottom
提问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