如何在引導按鈕內製作響應文本

我正在使用w3.css和引導庫添加以下鏈接按鈕。如果您調整屏幕大小，您會注意到按鈕內的文字無法響應。如何根據屏幕分辨率使文本適合按鈕？如何在引導按鈕內製作響應文本


 

 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/ 
 
bootstrap.min.css"> 
 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 

 

 
<a class="w3-right btn btn-primary w3-animate-right w3-hover-shadow w3-teal 
 
w3-hover-indigo btn-block w3-text-white" style="font-weight: bold;width:40%;" 
 
     href="#">Proceed to checkout page</a>

來源

2016-08-23 Nicolas Papaconstantinou

您可以通過顯示設置表做。

element.style { 
    font-weight: bold; 
    width: 43%; 
    display: table; 
}

來源

2016-08-23 15:47:06 Vcasso

-1

我想你有一個電子商務網站的權利？我建議你改用圖片，它有更好的設計，看起來更專業。你可以選擇你喜歡的圖片，但要確保它不是太大

<form action="https://www.google.com"> 
 
    <input type="image" src="http://i.imgur.com/TT3aQk9.png" 
 
style="width:30%;height:30%;" alt="Submit" > 
 
</form>

來源

2016-08-23 15:47:26 csandreas1

是我做的，謝謝你的建議我喜歡。 –

我會用whitespace: normal解決你的問題，如果它確定有你的按鈕多行文本你需要一個固定的寬度（你已經設置了40％）。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 

 

 
<a class="w3-right btn btn-primary w3-animate-right \t w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;white-space:normal " 
 
    href="#">Proceed to checkout page 
 
</a>

如果它的好，你能負擔得起改變寬度，你可以把display:table由@指出csandreas1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 

 

 
<a class="w3-right btn btn-primary w3-animate-right \t w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;display:table" 
 
    href="#">Proceed to checkout page 
 
</a>

來源

2016-08-23 15:57:56 kukkuz

感謝您的幫助！ –

如何在引導按鈕內製作響應文本

回答

相關問題