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

Question

He siguiente código en el archivo html:

<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:

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:

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

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

Answer 1

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/

Answer 2

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.

Answer 3

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

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