Я пытаюсь создать кнопку "Загрузить из магазина приложений", используя twitter bootstrap.
Проблема, с которой я столкнулась, заключается в том, чтобы текст "Магазин приложений" был больше, чем текст "Загрузить из" над ним.
Вот 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>
Я ценю отзывы и опыт.
оберните текст и сжимайте его размером шрифта: меньшим или любым другим размером, который вам нравится.
<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>
Собственно, подумайте об этом, вы можете произвольно сделать это, если выполнено одно из двух условий. 1) кнопка согласована по размеру, чтобы разбить ее в нужном месте (используя фиксированную ширину кнопки или сделать ее относительно размера контейнером с фиксированной шириной) или 2) применить тег <br> в нужном месте. Тогда это просто вопрос добавления псевдо-класса :first-line
.btn div {
font-size:40px
}
.btn div:first-line {
font-size:20px
}