Html 自定义引导按钮中的文本大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17579469/
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
Customize text size in bootstrap button
提问by bbrooke
I am trying to a create a "Download from the App Store" button using twitter bootstrap.
我正在尝试使用 twitter bootstrap 创建一个“从 App Store 下载”按钮。
The issue I am having is trying to make the "App Store" text larger than the "Download from the" text above it.
我遇到的问题是试图使“App Store”文本大于其上方的“从以下下载”文本。
Here is HTML and CSS that I am using.
这是我正在使用的 HTML 和 CSS。
.fixed-hero .hero-text {
padding-top: 90px;
width: 65%;
color:#fff;
font-family: Century Gothic, sans-serif;
font-size: 2.2em;
line-height: 1.5em;
}
.fixed-hero .hero-button {
padding-top: 60px;
width: 65%;
}
.btn.btn-large.btn-danger{
border-style:solid;
border-width:1px;
border-color:#fff;
background-image: linear-gradient(to bottom, rgb(204, 81, 81), #990000);
text-align: left;
}
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<i class="icon-apple icon-3x pull-left"></i>
<div>
Download from the
App Store
</div>
</a>
</div>
I appreciate the feedback and expertise.
我感谢反馈和专业知识。
采纳答案by tmcc
wrap the text and shrink it with font-size:smaller or whatever size you like.
包装文本并使用 font-size:smaller 或您喜欢的任何大小缩小它。
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<i class="icon-apple icon-3x pull-left"></i>
<span style="font-size:smaller;">Download from the</span>
App Store
</a>
</div>
回答by Joseph Marikle
Actually come to think of it you can arbitrarily do this provided one of two conditions are met. 1) the button is consistent in size to have the break at just the right spot (using fixed width of the button or making it relative in size to a fixed width container) or 2) applying a <br>tag at the desired spot. Then it's just a matter of adding a :first-linepseudo-class
其实想想，只要满足两个条件之一，你就可以随意这样做。1) 按钮大小一致，以便在正确的位置中断（使用按钮的固定宽度或使其大小相对于固定宽度的容器）或 2)<br>在所需位置应用标签。那么就只需要添加一个:first-line伪类了
.btn div {
font-size:40px
}
.btn div:first-line {
font-size:20px
}
