在引导按钮中自定义文本大小答案

【问题标题】：Customize text size in bootstrap button在引导按钮中自定义文本大小
【发布时间】：2013-07-08 21:41:40
【问题描述】：

我正在尝试使用 twitter bootstrap 创建一个“从 App Store 下载”按钮。

我遇到的问题是试图使“App Store”文本大于其上方的“从该下载”文本。

这是我正在使用的 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>

感谢您的反馈和专业知识。

【问题讨论】：

但是'Download from the'和'App Store'是同一个文本节点。你不能混合这样的风格。您需要将它们分解为单独的节点以具有两种单独的样式。
您可以使用 twitter bootstrap stackoverflow.com/questions/18996202/… 换行按钮文本字

标签： html css twitter-bootstrap

【解决方案1】：

实际上，只要满足两个条件之一，您就可以任意执行此操作。 1) 按钮的大小一致，以便在正确的位置进行中断（使用按钮的固定宽度或使其大小与固定宽度的容器相关）或 2) 在所需位置应用 <br> 标签。然后就是添加一个:first-line伪类

.btn div {
  font-size:40px
}

.btn div:first-line {
    font-size:20px
}

http://jsbin.com/oxivoz/2/
http://jsbin.com/oxivoz/2/edit

【讨论】：

【解决方案2】：

包装文本并使用 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>

【讨论】：