我在 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>
我得到这样的输出:
请注意,“This is second notice”与其上方的行没有正确对齐。我正在尝试使这两个通知彼此正确对齐。
我也尝试删除 <br/>
从上面的代码但是我得到以下输出:
有人可以指出我做错了什么吗?
JSFiddle:http://jsfiddle.net/N6vGZ/23/
最佳答案
两个段落在导航栏中没有正确对齐的原因是因为 Bootstrap 设置的 40px
的默认 line-height
不允许它们堆叠正确。您可以通过设置较低的 line-height
来解决这个问题,20px
应该可以解决这个问题。
注意:我将这两个段落都包含在一个容器中,我可以轻松地用我自己的类 float 和定位它,以免打扰它周围的其他元素。
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;
}
关于html - 文本未与 Bootstrap 的导航栏文本右拉正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10508466/