文本与引导程序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，但我认为你的“右拉”课程中有“float：right”。

我认为解决问题的最简单方法是将两个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与nav类一起使用，将li与pull-right一起使用

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