Mobilde 1 satırda 2 önyükleme düğmesi

Question

Mobil ekranda önyükleme şeridini kullanarak bir satırda iki düğme nasıl yapılır? Bu kodu kullanıyorum, ancak mobil görünümde 2 satır görüntüleniyor.

<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

sınıfları div'leri: col-xs-3 içerisinde muhtelif mobilde ayarlamak için. Tablet önyükleme kontrol altında kesme noktaları tam bir referans için onun col-sm-3

Kontrolü Bu Fiddle

görünümleri üzerinde: Bootstrap Grid

Answer 2

Sen küçük cihazlar

hedeflemek için sınıf col-SM- * kullanmak zorunda

Düzenleme:

Sen düğmeye eklemek zorunda

<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

Ben wlalele en az cevap düzenlenebilir. Burada yapılması gereken değişiklikler, daha küçük mobil cihaz ekranları için ekstra sınıf (col-xs-3) ekliyor.

<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>