Evitar que el Texto Se Ajuste en el Diseño Responsivo de Bootstrap 3


Tengo un visor con una barra de control que consiste en divs en una fila. Los otros elementos tienen el icono FA ya sobre el texto para ello por lo que no hay ningún problema con el tamaño de la pantalla, pero con el fin de diferenciar dos de los botones que tienen un mayor nivel de control para cambiar el contenido en el visor. Se presentan como se muestra a continuación:

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

Cuando esto se muestra en una pantalla pequeña como un iPhone, el icono se mueve sobre el texto y me gustaría que se quede junto a él en su lugar. La razón es que el otro botón luego se alinea con el icono debajo de él que es mala interfaz de USUARIO.

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

¿Alguna opción sobre cómo evitar que se envuelvan?

Author: WhyEnBe, 2015-01-16

1 answers

Rodéalo con un <span class="text-nowrap">. La clase .text-nowrap es una de las clases auxiliares de alineación de texto de Bootstrap y consiste en:

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

Lo que hace que el icono y el texto permanezcan en la misma línea.

 107
Author: ckuijjer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-16 14:51:41