부트 스트랩 : 버튼 텍스트 왼쪽 정렬

Question

부트 스트랩 버튼 내에서 텍스트를 왼쪽으로 정렬하려면 어떻게합니까? 다양한 길이의 텍스트가있는 여러 개의 단추가 있고 모든 단추의 너비가 같아야합니다. 클래스 col-xs-11을 사용하여이 작업을 수행했습니다. 아래

샘플 버튼 코드 :

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11"> 

가 무엇을하는 것은 부트 스트랩에 의해 제공되는 다른 것보다, 사용자 정의 스타일을 만들지 않고이를 달성 할 수 있습니까? 나는

Answer 1

그냥 text-left 클래스

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left"> 

Answer 2

당신은 단지 대신 추가 클래스를 사용하는 일반적인 방법 CSS를 적용 할 수 있습니다에게 추가 부트 스트랩 V3.0.1을 사용하고 있습니다.

/*specific button*/  
#mybutton { 
    text-align: left; 
} 

/*all input that have type button*/ 
input[type='button'] { 
    text-align: left; 
} 

Answer 3

또는 인라인 스타일을 사용하기위한 경우 그 하나 하나 개의 버튼

style="text-align:left; padding-left:6px" 

Answer 4

부트 스트랩 클래스가있는 경우 문제는, 원래의 게시물을 요구 한하지 왼쪽에 텍스트를 맞 춥니 다 CSS하는 방법은 그것에 대한 이름이 작동합니다.

.text-left가 작동하지만 문제는 text-left보다 더 강한 .btn이 있다는 것입니다. 이것은 부트 스트랩이 생각해야 할 것으로 생각합니다.

부트 스트랩의 사이트에서 Chrome 검사로 테스트 한이 스크린 샷을 확인하십시오.

내 Chrome에서는 데모 버튼에 'text-left'를 추가 했으므로 그 결과입니다. 따라서, 중요하게 생각하십시오!

Answer 5

버튼 정의에 important!를 추가하면 사용이 강제됩니다.