Text nicht richtig mit dem Bootstrap-Ausrichtung navbar-Text Pull-rechts

Ich habe in der HTML-Datei folgenden Code:Text nicht richtig mit dem Bootstrap-Ausrichtung navbar-Text Pull-rechts

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

Ich bin die Ausgabe wie folgt erhalten:

enter image description here

Beachten Sie, dass "Dies ist der zweite Hinweis" ist nicht richtig ausgerichtet in Bezug auf die Linie darüber. Ich versuche, die beiden Notizen richtig miteinander zu verbinden.

Ich habe auch versucht <br/> von Code oben, jedoch mit, dass ich die folgende Ausgabe zu entfernen: enter image description here

Könnte mir jemand bitte zeigen, was ich falsch mache?

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

Quelle

2012-05-09 test123

Wo ist Ihr CSS dass stylen? HTML ist wahrscheinlich NICHT dein Problem. Und hast du ein Bild, das zeigt, wie du es haben willst? Sie möchten, dass die zweite Nachricht genau unter der ersten ausgerichtet wird, oder? – rafaelbiten

es sollte Formatierungsstile von bootstrap.min.css erhalten werden nein? Ich habe keine Regeln für diese Klasse in meinem CSS angegeben. – test123

Vielleicht könnten Sie Ihren Code auf [jsFiddle] (http://jsfiddle.net/) setzen. –

Der Grund beiden Absätze werden nicht richtig in den navbar Ausrichtung ist, weil die Standard-line-height von 40px her von den Haaren aus dem Sumpf gesetzt Doesn Lassen Sie beide nicht richtig stapeln. Sie können das beheben, indem Sie eine niedrigere line-height setzen, etwas wie 20px sollte den Trick tun.

Hinweis: Ich habe beide Absätze in einen Container eingefügt, den ich problemlos mit meiner eigenen Klasse schweben und zielen lassen kann, um die anderen Elemente nicht zu stören.

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>

Versuchen Sie folgendes:

CSS

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

Demo: http://jsfiddle.net/N6vGZ/29/

Quelle

2012-05-09 19:41:29

Vielen Dank! Genau das, was ich brauchte. :-) – test123

-1 Die 'line-height' hat ** nicht ** eine Einheit ... – kaiser

@kaiser ich verstehe deinen Kommentar nicht, interessiert dich das zu erklären? –

Sie umfassen nicht die CSS, aber ich nehme an, Sie haben "float: right" auf "Pull-rechts" -Klasse.

Ich denke, der einfachste Weg, es zu lösen, ist die zwei p die in ihrem eigenen div und Schwimmer, dass taucht rechts zu wickeln:

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

Sie nicht eine Breite auf dem "zu setzen vergessen pull-right "klasse in deinem css, wenn du es noch nicht getan hast.

Quelle

2012-05-09 00:58:18

Danke für die Antwort J. Greene. Es funktioniert mit dem, was Sie vorgeschlagen haben, aber es setzt eine Leerzeile zwischen der ersten und der zweiten Nachricht. Gibt es eine Möglichkeit, das zu vermeiden? – test123

Ja, Sie haben diese in p-Tags verpackt. Ich denke an ein br-Tag als ein einzelnes Leerzeichen und ein p-Tag als ein doppeltes Leerzeichen. Sie können die beiden Zeilen in "span" (anstelle von "p") mit dem Klassennavbar-Text umbrechen und einen einzelnen Br dazwischen legen, oder Sie können den Abstand zwischen den Absätzen mit Stilen anpassen. –

Danke für die Antwort J. Greene. Das Anpassen des Abstands zwischen Absätzen hat den Trick (wie von @Andres auch vorgeschlagen). – test123

Sie können ul mit nav-Klasse verwenden und li mit Pull-rechts

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

Quelle

2012-05-09 05:49:11

Danke für die Antwort Seb. Ich wollte eigentlich, dass die beiden Nachrichten auf getrennten Zeilen stehen. Der Link in Andres Lösung ist so, wie ich es wollte. Vielen Dank! – test123

Text nicht richtig mit dem Bootstrap-Ausrichtung navbar-Text Pull-rechts

Antwort

Verwandte Themen