부트 스트랩 버튼 더 작은 화면 크기의 전체 너비

Question

작은 화면의 경우 부트 스트랩 버튼을 전체 화면 너비 (거의, 거의)로 사용하고 싶습니다. btn-block 버튼을 확장하지만 모든 유형의 화면에 적용됩니다.

이 btn-block은 CSS를 사용하여 맞춤 설정 (예 : @media 사용)하여 작은 화면에서만 활성화되도록 할 수 있습니까? 아니면 다른 방법이 있습니까?

내 HTML 버튼 코드 라인

가 아래에 언급 :

<button type="submit" class="btn btn-lg btn-success"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning"> 
    Reset 
</button> 

감사

AB

Answer 1

불행하게도이 아닌 있습니다 th를 적용하는 부트 스트랩의 '클래스' '효과'입니다. 당신이 할 수있는 유일한 일은 CSS에서 @media를 사용하는 것입니다. 당신은 버튼의 '안부'클래스 중 하나를 적용 할 수 있습니다

@media (max-width: 768px) { 
    .btn, .btn-group { 
     width:100%; 
    } 
} 

하지만 버튼의 '상자'는 그 내용의 크기를 따르지 않습니다 : 당신은 그것을 사용할 수 있습니다.

도움이되기를 바랍니다. :)

Answer 2

이 형태 제어 클래스 추가를

<button type="submit" class="btn btn-lg btn-success form-control"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning form-control"> 
    Reset 
</button> 

Answer 3

이 새로운 CSS 클래스 만들기 :

@media(max-width: 768px) { 
    button.full-width { 
     width: 100%; 
    } 
} 

을 다음 버튼에 적용 : 제 생각에는

<button type="submit" class="btn btn-lg btn-success full-width"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning full-width"> 
    Reset 
</button> 

, 그것은 Claudio B으로 부트 스트랩 클래스를 편집하는 제안보다 더 좋은 생각이다 .