작은 화면에서 부트 스트랩 .btn-group을 제거하십시오.

Question

아래 HTML 태그를 사용하여 단추 목록을 생성하고 .btn-group을 사용하여 단추를 그룹화합니다.

싶지만 모바일 같은 소형 기기에 페이지를보고의 뷰를 생성

가

<div class="btn-group mt-30"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div> 

보기는 소형 장치에서

로 렌더링되고, I는 .btn-group 클래스를 제거 할 작은 기기에서는 각 버튼을 새 라인에 표시하기 때문에

을 div에서 제거하면 세 번째 이미지와 같이 화면이 렌더링됩니다.

어떻게에만, 즉, md 또는 lg 대형 장치에 .btn-group 적용하고, xssm에 그것을 불능으로 할 수 ?

Answer 1

당신은 소형 기기에 .btn-group .btn을 덮어 쓰기해야합니다

@media (max-width: 760px) { 
    .btn-group .btn.btn-circle { 
     border-radius: 10px; 
     display: block; 
     float: none; 
    } 
} 

Answer 2

@Justinas '대답은 부트 스트랩의이 경우에 아마도 더 나은,하지만 당신이 원한다면 실제로 사용할 수있는, 서로 다른 크기의 디스플레이에 대해 서로 다른 마크 업을 Responsive Utilities.

<div class="btn-group mt-30 hidden-sm hidden-xs"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div> 

그리고 소형 기기에

: 내가 생각하지 않는, 두 번 코드 같은 블록을 작성해야

<div class="visible-sm-block visible-xs-block"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div>