Wie man einen reaktionsfähigen Text in einer Bootstrap-Taste erzeugt

Question

Ich füge die folgende Link-Schaltfläche mit w3.css und Bootstrap-Bibliotheken hinzu. Wenn Sie die Größe des Bildschirms ändern, bemerken Sie, dass der Text in der Schaltfläche nicht reagiert. Wie passt der Text in die Schaltfläche entsprechend der Bildschirmauflösung?

 

 
    <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

Sie können es tun, indem Sie die Anzeige auf Tabelleneinstellung.

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

Answer 2

Ich nehme an, Sie haben eine E-Commerce-Website oder? Ich schlage vor, dass Sie stattdessen ein Bild verwenden, es hat ein besseres Design und es sieht professioneller aus. Sie können ein Bild Ihrer Wahl wählen, aber stellen Sie sicher, es ist nicht zu groß

<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

ich whitespace: normal verwenden würde Ihr Problem zu lösen, wenn es ok mehrzeiligen Text in Ihrer Schaltfläche haben und du brauchst eine feste Breite (du hast 40% gesetzt).

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

Wenn seine Ordnung, dass Sie die Breite ändert sich leisten können, können Sie setzen display:table als csandreas1

von @ wies darauf hin,

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