html - 如何在 Bootstrap 按钮内制作响应式文本

Question

我使用 w3.css 和 Bootstrap 库添加以下链接按钮。如果调整屏幕大小，您会发现按钮内的文本没有响应。如何让文字根据屏幕分辨率适合按钮？

 

     <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

如果可以在按钮中包含多行文本并且您需要固定宽度(您已设置 40%)，我会使用 whitespace: normal 来解决您的问题。

  <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%;white-space:normal "
  href="#">Proceed to checkout page
</a>

如果您可以承受更改宽度的费用，则可以按照@csandreas1指出的那样放置display:table

  <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%;display:table"
  href="#">Proceed to checkout page
</a>