ブートストラップボタンの中で反応するテキストを作る方法

Question

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> 
 

 

Answer 1

あなたは、テーブルに表示を設定することによってそれを行うことができます。

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

Answer 2

あなたはeコマースのウェブサイトを正しく所有していると思いますか？代わりに画像を使用することをお勧めします。より優れたデザインで、よりプロフェッショナルに見えます。あなたは、お好みの画像を選択しますが、必ずそのOKがあなたのボタンに複数行のテキストを持っている場合、私はあなたの問題を解決するためにwhitespace: normalを使用する

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

Answer 3

大きすぎないことができます固定幅が必要です（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>

あなたははい、私がやる

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