부트 스트랩 버튼 내에 반응 형 텍스트를 만드는 방법

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

전자 상거래 웹 사이트가 있다고 생각하십니까? 대신 이미지를 사용하는 것이 좋으며, 디자인이 좋고 전문적으로 보입니다. 당신은 당신의 선택의 이미지를 선택하지만 반드시 내가 당신의 문제를 해결하기 위해 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>

당신은 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 \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>