Mantieni colonne di bootstrap nella stessa riga quando si modifica la dimensione

Question

Ho un div che ha due colonne: una contiene un glifonio, l'altra contiene il testo. A taglie più grandi, questo funziona correttamente:

Ma quando il browser è in una larghezza minore (o mobile), le colonne divise, e si finisce per assomigliare a questo:

C'è un modo per forzare le colonne a stare insieme in una singola riga? C'è molto spazio per entrambe le colonne, anche nelle dimensioni più strette.

Ecco il mio HTML per una singola riga:

<div class="row"> 
    <div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-md-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div> 

Il CSS è bootstrap standard (classe i è un glyphicon FontAwesome).

Answer 1

class="col-md-2 col-xs-2" e class="col-md-10 col-xs-10"

È possibile combinare le classi per l'elemento per rendere comportarsi certo modo in base alle dimensioni dello schermo. Puoi fare qualcosa come class="col-md-2 col-xs-6" e class="col-md-10 col-xs-6" ecc ...

Answer 2

Utilizzare le classi di griglia col-xs-*.

<div class="row"> 
    <div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-xs-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div> 

In una griglia di bootstrap, le colonne sono tutte del 100% di larghezza per impostazione predefinita. Utilizzare le classi col-<size>-<number> per sovrascriverlo. Lo <size> può essere xs, sm, md o lg e fa riferimento alla larghezza minima dello schermo per quella classe da applicare. Lo <number> è un numero da 1 a 12 e si riferisce al numero di colonne di larghezza che dovrebbe essere il contenuto.

Quindi, forse hai un contenuto molto ampio, e dovrebbe essere visualizzato solo affiancato sui browser desktop. Potresti fornire il tuo contenuto class="col-md-6" e visualizzarlo affiancato purché la finestra del browser sia larga almeno 992 pixel.

Ma, per te, dal momento che il tuo contenuto è veramente piccolo, vuoi che venga sempre visualizzato affiancato, quindi dovresti usare le classi col-xs-<number>.

Si potrebbe fare in modo che sul cellulare, è avere una coppia per riga, ma sulle tavole di avere due per riga, e sui desktop si dispone di 3 per ogni riga:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Adaptive Updates</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Online Support and Knowledge Base</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Direct Support</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Enterprise Management Console</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Zero Day Protection</p> 
 
     </div> 
 
    </div> 
 
</div>

Vedere bootstrap Grid System documentation per ulteriori dettagli.