モバイルにブートストラップボタンをスタックするにはどうすればいいですか

Question

私は、ウェブブラウザで2x2を表示し、次にモバイルと多分タブレットの上に重ねて表示する4つのボタンを持っています。私はbtn - プライマリとセカンダリとボタンのブロックを使用して読んで、私は運がないです。これを達成する最も簡単な方法はありますか？

<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クエリを使用してみてくださいは...