5

我在 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/

4

3 回答 3

9

两个段落在导航栏中没有正确对齐的原因是引导程序设置的默认值line-height不允许40px它们都正确堆叠。你可以通过设置一个 lower 来解决这个问题，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/

于 2012-05-09T19:41:29.477 回答
3

您没有包含 css，但我假设您的“pull-right”类中有“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 中设置“pull-right”类的宽度，请不要忘记设置宽度。

于 2012-05-09T00:58:18.050 回答
0

You can use ul with nav class and li with pull-right

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

于 2012-05-09T05:49:11.500 回答