2 Bootstrap-Taste in 1 Zeile auf Handy

Wie man zwei Tasten in einer Zeile mit dem Bootstrap im mobilen Display machen? Ich benutze diesen Code, aber in der mobilen Ansicht zeigt es 2 Zeile.2 Bootstrap-Taste in 1 Zeile auf Handy

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

Quelle

2016-03-31 Muhammad Rauuf

Sie müssen Ihre Schaltfläche hinzufügen divs die Klassen: col-xs-3 aswell um es auf Handy anzupassen. Auf Tablette dies seine col-sm-3

prüfen Ansichten Fiddle

Für einen vollständigen Verweis auf Stützpunkte in Bootstrap-Check: Bootstrap Grid

Quelle

2016-03-31 08:26:38 Roman

Sie haben die Klasse col-SM- * verwenden, um kleine Geräte zum Ziel

Edit:

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

Quelle

2016-03-31 08:20:11 wlalele

möchten Sie Ihren Code teilen? Ich habe es in sm geändert, aber es ist immer noch dasselbe. –

Ich habe ein Beispiel hinzugefügt, ich habe es nicht ausprobiert. – wlalele

hat es immer noch nicht funktioniert. aber danke für deine Teilnahme :) –

I edited wlalele ist ein wenig beantworten. Die hier erforderlichen Änderungen umfassen die zusätzliche Klasse (col-xs-3) für kleinere Bildschirme mobiler Geräte.

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

Quelle

2016-03-31 08:45:33 Prajwal

2 Bootstrap-Taste in 1 Zeile auf Handy

Antwort

Verwandte Themen