如何在引导按钮内制作响应式文本答案

【问题标题】：How to make a responsive text inside a bootstrap button如何在引导按钮内制作响应式文本
【发布时间】：2016-08-23 15:28:03
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css twitter-bootstrap button responsive

【解决方案1】：

我会使用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	 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	 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>

【讨论】：

【解决方案2】：

您可以通过将显示设置为表格来做到这一点。

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

【讨论】：

【解决方案3】：

我想你有一个电子商务网站吧？我建议你改用一张图片，它有更好的设计，看起来更专业。您可以选择自己喜欢的图片，但请确保图片不要太大

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

【讨论】：