모바일에 부트 스트랩 버튼을 어떻게 스택 할 수 있습니까?

Question

웹 브라우저에서 2x2로 표시하고 모바일 및 태블릿에서 서로 겹쳐서 쓰고 싶은 버튼이 4 개 있습니다. 나는 btn-primary와 secondary 그리고 button block을 사용하는 것에 대해 읽었지만 운이 없다. 이것을 달성하기위한 가장 쉬운 방법은 어떤 방향입니까?

는

<div class="button-group ">  
 
       <button class="btn btn-primary btn-primary page-scroll" href="#intro">watch video</button> 
 
       <button class="btn btn-primary btn-secondary">review info</button> 
 
      </div> 
 
      <div class="button-group "> 
 
       <button class="btn btn-primary btn-primary">see sample</button> 
 
       <button class="btn btn-primary btn-secondary">sequence</button> 
 
      </div>

Answer 1

부트 스트랩의 .btn-group 구성 요소는 .btn-group 한 번에 있지만 두 가지 스타일이 eighter 수평 또는 수직 사용할 수 있습니다.

미디어 쿼리를 사용하고 스타일을 덮어 씁니다.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"); 
 

 
.btn-group {margin-bottom: 10px;} 
 

 
@media only screen and (max-width: 767px) { 
 
    .btn-group { 
 
    display: block; 
 
    } 
 
    
 
    .btn-group .btn { 
 
    display: block; 
 
    float: none; 
 
    width: 100%; 
 
    } 
 
}

<div class="btn-group">  
 
    <button class="btn btn-primary" href="#intro">watch video</button> 
 
    <button class="btn btn-primary">review info</button> 
 
</div> 
 
<div class="btn-group "> 
 
    <button class="btn btn-primary">see sample</button> 
 
    <button class="btn btn-primary">sequence</button> 
 
</div>

Answer 2

모바일 기기의 버튼의 배치 위치를 변경하기 위해 CSS의 @media 쿼리를 사용 시도는 ...