Cómo obtener un botón sensible en bootstrap 3

Estoy usando bootstrap 3 y tengo el siguiente html: 

<div class="col-sm-2" >
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>

En una pantalla pequeña, el texto "Crear nuevo tablero" es demasiado largo para caber en el botón. Me gustaría que el texto se ajustara a otra línea y que la altura del botón aumentara para ajustarse al texto. ¿Algún consejo sobre cómo hacer esto?

Author: austin, 2013-10-10
Source

5 answers

En Bootstrap, la clase .btn tiene una propiedad white-space: nowrap;, por lo que el texto del botón no se ajustará. Por lo tanto, después de establecer eso en normal, y dar al botón un width, el texto debe ajustarse a la siguiente línea si el texto excedería el conjunto width.

#new-board-btn {
    white-space: normal;
}

Http://jsfiddle.net/ADewB /

 82
Author: MattDiamant,
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-09-18 16:06:55

Sé que esto ya tiene una respuesta marcada, pero siento que tengo una mejora en ella.

La respuesta marcada es un poco engañosa. Estableció un ancho para el botón, que no es necesario, y los anchos establecidos no son "sensibles". Para su defensa, menciona en un comentario debajo de él, que el ancho no es necesario y solo un ejemplo.

Una cosa que no se menciona aquí, es que las palabras pueden romperse en medio de una palabra y verse desordenadas.

Mi solución, obliga a que ocurra la ruptura entre palabras, un buen ajuste de palabras.

.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>
 27
Author: Wade,
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-09-18 16:02:54

Para cualquier persona que pueda estar interesada, otro enfoque es usar @media queries para escalar los botones en diferentes anchos de vista..

Demo: http://bootply.com/93706

 17
Author: Zim,
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
2013-11-13 15:37:22

En algunos casos es muy útil cambiar el tamaño de fuente con unidades de tamaño de fuente relativas. Por ejemplo:

.btn {font-size: 3vw;}

Demo: http://www.bootply.com/7VN5OCVhhF

1vw es el 1% del ancho de la ventana. Más información: http://www.sitepoint.com/new-css3-relative-font-size /

 4
Author: MartySK,
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
2016-02-17 21:35:07 
<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

Podemos usar btn-block para respuesta automática.

 2
Author: Priyanko,
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
2014-08-20 07:09:25