Question

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

＆＃13;

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

＆＃13;

Answer 1

我会使用whitespace: normal解决您的问题，如果您的按钮中有多行文字，并且您需要固定宽度（您设置了40％）。

＆＃13;

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

＆＃13;

如果你能负担得起改变宽度，你可以按{csandreas1

指出display:table

＆＃13;

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

＆＃13;

Answer 2

您可以通过将显示设置为表格来完成。

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

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

如何在引导按钮

3 个答案: