Conserver le texte enveloppé dans Bootstrap 3 Responsive Design
J'ai un spectateur avec une barre de contrôle composée de divs dans une rangée. Les autres éléments ont déjà l'icône FA sur le texte, ce qui ne pose pas de problème de taille d'écran mais permet de différencier deux des boutons dotés d'un contrôle de niveau supérieur pour permuter le contenu dans le visualiseur. Ils sont disposés comme indiqué ci-dessous:
<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next
Lorsque ceci est affiché sur un petit écran comme un iPhone, l'icône se déplace sur le texte et j'aimerais qu'il reste à côté de celui-ci. La raison étant que l'autre bouton s'aligne ensuite sur l'icône située en dessous, ce qui est une mauvaise interface utilisateur.
Previous<i class="fa fa-toggle-left lg"></i>
Des options quant à la façon de les empêcher de boucler?
Entourez-le d'un <span class="text-nowrap">. La classe .text-nowrap est l’un des alignement du texte de Bootstrap classes d’aide et se compose de:
.text-nowrap {
white-space: nowrap;
}
ce qui fait que l'icône et le texte restent sur la même ligne.