文本與bootstrap的navbar-text 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>

我得到這樣的輸出：

請注意，“這是第二次通知”與其上方的行沒有正確對齊。 我試圖讓兩個通知彼此正確對齊。

我也嘗試從上面的代碼中刪除<br/>但是我得到了以下輸出：

有人可以指出我做錯了什么嗎？

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

Answer 1

這兩個段落在導航欄中沒有正確對齊的原因是因為bootstraps提出的默認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，但我認為你在“右拉”課上有“浮動：正確”。

我認為解決問題的最簡單方法是將兩個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中的“右拉”類上設置寬度。

Answer 3

你可以使用帶導航類的ul和帶右拉的li

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