html - テキストがブートストラップのナビゲーションバーと正しく位置合わせされていません-テキストpull-right

Question

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

私は次のような出力を取得しています：

「これは2番目の通知です」が、その上の行に対して適切に配置されていないことに注意してください。私は2つの通知を互いに適切に整列させようとしています。

上記のコードから削除しようとし<br/>ましたが、次の出力が得られます。

誰かが私が間違っていることを教えてもらえますか？

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

Answer 1

両方の段落がナビゲーションバーで適切に整列されていない理由は、ブートストラップによって設定されたデフォルトline-heightでは40px、両方を正しくスタックできないためです。あなたはより低いものを設定することによってそれを修正することができますline-height、のような何か20pxがトリックをするべきです。

注：コンテナ内に両方の段落を含めたので、周囲の他の要素を気にしないように、自分のクラスで簡単にフロートしてターゲットにできます。

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>

これを試して：

CSS

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

デモ： http： //jsfiddle.net/N6vGZ/29/

Answer 2

cssは含まれていませんが、「pull-right」クラスに「float：right」があると思います。

それを解決する最も簡単な方法は、2つのpをそれぞれのdivでラップし、そのダイビングを正しくフロートすることだと思います。

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

まだ設定していない場合は、cssの「pull-right」クラスに幅を設定することを忘れないでください。

Answer 3

ulはnavクラスで使用でき、liはpull-rightで使用できます

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