Question

我正在尝试使用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>

我很感谢反馈和专业知识。

Answer 1

包装文本并使用font-size缩小它：更小或任何你喜欢的大小。

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

Answer 2

实际上来想一想，如果满足两个条件中的一个，你可以任意做。 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 个答案: