在引導按鈕中自定義文本大小

我試圖使用twitter引導創建「從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>

我很欣賞反饋和專業知識。

來源

2013-07-10 bbrooke

但和「應用商店」從下載「的事情是相同的文本節點。你不能混合這樣的風格。您需要將它們分解爲單獨的節點以擁有兩個單獨的樣式。 –

你可以使用twitter引導包裝按鈕文字Word http://stackoverflow.com/questions/18996202/twitter-bootstrap-button-text-word-wrap –

包裝文字並用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>

來源

2013-07-10 19:46:04 tmcc

完美！我很欣賞這些反饋。 – bbrooke

其實想到它你可以任意地做到這一點，只要滿足兩個條件之一即可。 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

來源

2013-07-10 19:59:08

在引導按鈕中自定義文本大小

回答

相關問題