Zachowaj kolumny bootstrap w tym samym wierszu, gdy zmieniasz rozmiar

Question

Mam element div, który ma dwie kolumny - jedna zawiera glify, druga zawiera tekst. Przy większych rozmiarach, to działa prawidłowo:

Ale gdy przeglądarka jest w mniejszej szerokości (lub komórkowego), kolumny podzielone, a kończy się wyglądać jak ten:

Czy istnieje sposób na wymuszenie trzymania kolumn w jednym rzędzie? W obu kolumnach jest wystarczająco dużo miejsca, nawet w najwęższym rozmiarze.

Oto mój HTML dla pojedynczego rzędu:

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

CSS jest standardem bootstrap (klasa i jest glyphicon FontAwesome).

Answer 1

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

Można łączyć zajęcia dla elementu, aby zachowywać się w określony sposób w oparciu o wielkości ekranu. Możesz zrobić coś takiego, jak class="col-md-2 col-xs-6" i class="col-md-10 col-xs-6" itd ...

Answer 2

Użyj klas Grid 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> 

W siatce początkowej wszystkie kolumny mają domyślnie szerokość 100%. Użyj klas col-<size>-<number>, aby to zmienić. Numer <size> może być xs, sm, md lub lg i dotyczy minimalnej szerokości ekranu dla tej klasy, która ma zostać zastosowana. Numer <number> to liczba od 1 do 12 i odnosi się do liczby kolumn, na których powinna znajdować się Twoja treść.

Może więc masz naprawdę szeroką zawartość i powinna być wyświetlana tylko obok siebie w przeglądarkach na komputerze. Możesz podać treść class="col-md-6" i będzie ona wyświetlana obok siebie, o ile okno przeglądarki ma szerokość co najmniej 992 pikseli.

Ale dla ciebie, ponieważ twoja zawartość jest naprawdę mała, chcesz, żeby zawsze wyświetlała się obok siebie, więc powinieneś używać klas col-xs-<number>.

Można zrobić to tak, że na komórkę, masz jedną parę w jednej linii, ale na tablicach masz dwa w jednej linii, a na komputerach masz 3 na linii:

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

Aby uzyskać więcej informacji, patrz bootstrap Grid System documentation.