Zachowaj tekst od zawijania w Bootstrap 3 Responsive Design

Question

Mam przeglądarkę z paskiem kontrolnym składającym się z elementów div z rzędu. Pozostałe elementy mają ikonę FA już nad tekstem, więc nie ma problemu z rozmiarem ekranu, ale w celu odróżnienia dwóch przycisków, które mają wyższy poziom kontroli, aby przełączyć zawartość w przeglądarce. Są one ułożone w sposób pokazany poniżej:

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next 

Gdy jest to pokazane na małym ekranie jak iPhone, porusza się ikona nad tekstem i chciałbym go zatrzymać obok niego zamiast. Powodem jest to, że drugi przycisk ustawia się w linii z ikoną poniżej, która jest źle wyglądającym interfejsem użytkownika.

Previous<i class="fa fa-toggle-left lg"></i> 

Dowolne opcje, jak zapobiec ich zawijaniu?

Answer 1

Otocz go za pomocą <span class="text-nowrap">. Klasa .text-nowrap jest jednym z Bootstrap's text alignment klas pomocniczych i składa się z:

.text-nowrap { 
    white-space: nowrap; 
} 

co sprawia, że ​​ikony i tekst pobyt na tej samej linii.