Bootstrap 3.0 tags de títulos en línea

Tengo el siguiente fragmento de código:

Heading

Second Heading

El objective es tener tanto el

como el

uno al lado del otro, en la misma línea de base. En este punto, el elemento

está muy por encima de la línea.

Intenté poner esto en tramos , y otros ‘trucos’ como vertical-align: bottom . Por alguna razón, simplemente no puedo conseguir esto en la misma línea y la misma altura de línea como esta:

Encabezado del segundo encabezado

Iba a terminar la primera respuesta, pero aquí hay una respuesta más completa:

http://bootply.com/79703

El HTML:

 

heading

second heading

El CSS:

 .inline-headers h2, .inline-headers h4 { display: inline-block; vertical-align: baseline; } 

Dos cosas están sucediendo aquí. En primer lugar, descartamos algunos flotantes innecesarios en los títulos, así como el div completamente borrable de clearfix. Para referencia futura, no necesita adjuntar un clearfix a un div por separado.

Segundo, sugeriría crear una nueva clase, en lugar de anular el comportamiento de la clase de pozo como lo indica el ejemplo de MasterPoint, en caso de que alguna vez desee que el pozo califique H2s y H4 normalmente.

Sorprendido, no se ha mencionado, pero otra forma sería usar las clases de encabezado.

 heading second heading 

Vea el archivo menos donde se aplican los estilos de tipografía , todo lo que necesita aparte de la pantalla: bloque

Bootstrap tiene soporte incorporado para encabezados secundarios con .

 

h3. Bootstrap heading Secondary text

http://getbootstrap.com/css/#type-headings

Mira el violín

http://jsfiddle.net/VccZ6/2/

tienes flotador incorrecto en tu h2 y aquí hay un rest de CSS que se necesita.

 .well h2, .well h4 { display: inline-block; vertical-align: baseline; line-height: 100%; } 

Actualizado…

… esto, hará el trabajo.