モバイルの1行に2つのブートストラップボタン

Question

モバイルディスプレイのブートストラップを使って1行に2つのボタンを作成する方法は？私はこのコードを使用しますが、モバイルビューでは2行を表示します。あなたはクラスCOL-SM-を使用する必要が

<div class="row" style="margin-top:50px"> 
     <div class="col-md-12 col-centered"> 
      <div class="col-md-3"></div> 
      <div class="col-md-3 text-center"> 
       <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
       <h3>Ajukan Izin</h3> 
      </div> 
      <div class="col-md-3 text-center"> 
       <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
       <h3>Ajukan Cuti</h3> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 
    </div> 

Answer 1

をあなたのボタンに追加する必要がクラスをdivタグ：col-xs-3 aswellをモバイルで調整するタブレット上のブートストラップのチェックにブレークポイントへの完全な参照のためにそのcol-sm-3

チェックこのFiddle

ビュー： Bootstrap Grid

Answer 2

*小型デバイスに

編集標的とするために：

<div class="row" style="margin-top:50px"> 
    <div class="col-md-12 col-sm-12 col-centered"> 
     <div class="col-md-3 hidden-sm"></div> 
     <div class="col-md-3 col-sm-6 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Izin</h3> 
     </div> 
     <div class="col-md-3 col-sm-6 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Cuti</h3> 
     </div> 
     <div class="col-md-3 hidden-sm"></div> 
    </div> 
</div> 

Answer 3

を私はwlalele年代が少し答える編集しました。ここで必要な変更は、モバイルデバイスの画面サイズを小さくするためのクラス（col-xs-3）を追加することです。

<div class="row" style="margin-top:50px"> 
    <div class="col-md-12 col-sm-12 col-centered"> 
     <div class="col-md-3 hidden-sm col-xs-3"></div> 
     <div class="col-md-3 col-sm-6 col-xs-3 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Izin</h3> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-3 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Cuti</h3> 
     </div> 
     <div class="col-md-3 hidden-sm col-xs-3"></div> 
    </div> 
</div>