文本与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

这两段没有在导航栏正确对齐的原因是因为默认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/