El texto no alinear correctamente con barra de navegación de texto tirón-derecha de arranque

He siguiente código en el archivo html:El texto no alinear correctamente con barra de navegación de texto tirón-derecha de arranque

<div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container-fluid"> 
        <a href="index.html" class="brand">Hello Bootstrap</a> 
        <p class="navbar-text pull-right">This is first notice.</p><br/> 
        <p class="navbar-text pull-right">This is second notice. </p> 
       </div> 
      </div> 
    </div>

estoy recibiendo la salida como esta:

enter image description here

en cuenta que una "Este es el segundo aviso" no está alineado correctamente con respecto a la línea superior. Estoy tratando de alinear los dos avisos correctamente.

También probé la eliminación <br/> de código anterior, pero con eso me da el siguiente resultado: enter image description here

Podría alguien por favor que me señale lo que estoy haciendo mal?

jsFiddle: http://jsfiddle.net/N6vGZ/23/

Fuente

2012-05-09 test123

¿Dónde está el CSS a estilo que? HTML probablemente NO es tu problema. ¿Y tienes una imagen que muestra cómo quieres que sea? ¿Desea que la segunda notificación se alinee justo debajo de la primera, verdad? – rafaelbiten

debería estar recibiendo estilos de formato de bootstrap.min.css no? No he especificado ninguna regla para esta clase en mi CSS. – test123

Quizás podría poner su código en [jsFiddle] (http://jsfiddle.net/). –

La razón ambos párrafos no se alinean correctamente en la barra de navegación se debe a que el valor por defecto line-height de 40px establecidos por el propio esfuerzo doesn No les permita apilarse correctamente. Puede solucionarlo estableciendo un line-height inferior, algo así como 20px debería hacer el truco.

Nota: incluí ambos párrafos dentro de un contenedor que puedo flotar fácilmente y apuntar con mi propia clase, para no molestar a los otros elementos que lo rodean.

HTML

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a href="index.html" class="brand">Hello Bootstrap</a> 
      <div class="notices pull-right"> 
       <p class="navbar-text">This is first notice.</p> 
       <p class="navbar-text">This is second notice.</p> 
      </div> 
     </div> 
    </div> 
</div>

Prueba esto:

CSS

.notices p { 
    line-height:20px !important; 
}

Demostración: http://jsfiddle.net/N6vGZ/29/

Fuente

2012-05-09 19:41:29

¡Muchas gracias! Exactamente lo que necesitaba. :-) – test123

-1 El 'line-height' no ** tiene ** una unidad ... – kaiser

@kaiser No entiendo tu comentario, ¿te importa explicarlo? –

Usted no incluyó el css pero se supone que tiene "float: right" en su clase "pull-derecha".

Creo que la forma más fácil de resolver que es envolver los dos p de en su propio div y el flotador que el derecho de buceo:

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container-fluid"> 
       <a href="index.html" class="brand">Hello Bootstrap</a> 
       <div class="pull-right"> 
        <p class="navbar-text">This is first notice.</p> 
        <p class="navbar-text">This is second notice. </p> 
       </div> 
      </div> 
     </div>

No se olvide de establecer un ancho en el " pull-right "class en tu css si aún no lo has hecho.

Fuente

2012-05-09 00:58:18

Gracias por la respuesta J. Greene. Funciona con lo que sugirió, pero está poniendo una línea vacía entre el Aviso 1 y el Aviso 2. ¿Hay alguna manera de evitar eso? – test123

Sí, tiene esos envueltos en etiquetas p. Me gusta pensar en una etiqueta br como un espacio único y una etiqueta p como un espacio doble. Puede envolver las dos líneas en "span" (en lugar de "p") con la clase navbar-text y poner un br único entre ellas, o puede ajustar el espaciado entre los párrafos con estilos. –

Gracias por la respuesta J. Greene. Ajustar el espacio entre párrafos hizo el truco (como lo sugiere @Andres también). – test123

Puede utilizar ul con la clase de navegación y Li con sofá-derecha

http://jsfiddle.net/N6vGZ/28/

Fuente

2012-05-09 05:49:11

Gracias por la respuesta Seb. De hecho, quería que los dos avisos estuvieran en líneas separadas. El enlace en la solución Andres es la forma en que lo quería. ¡Gracias! – test123

El texto no alinear correctamente con barra de navegación de texto tirón-derecha de arranque

Respuesta

Cuestiones relacionadas