[英]Text not aligning properly with bootstrap's navbar-text pull-right
I have following code in the html file: 我在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>
I am getting the output like this: 我得到这样的输出:
Notice that "This is second notice" is not aligned properly with respect to the line above it. 请注意,“这是第二次通知”与其上方的行没有正确对齐。 I am trying to get the two notices aligned properly with each other.
我试图让两个通知彼此正确对齐。
I also tried removing <br/>
from code above but with that I get the following output: 我也尝试从上面的代码中删除
<br/>
但是我得到了以下输出:
Could someone please point me what I am doing wrong? 有人可以指出我做错了什么吗?
JSFiddle: http://jsfiddle.net/N6vGZ/23/ JSFiddle: http : //jsfiddle.net/N6vGZ/23/
The reason both paragraphs are not aligning properly in the navbar is because the default line-height
of 40px
set forth by the bootstraps doesn't allow them both to stack correctly. 这两个段落在导航栏中没有正确对齐的原因是因为bootstraps提出的默认
line-height
40px
不允许它们都正确堆叠。 You can fix that by setting a lower line-height
, something like 20px
should do the trick. 您可以通过设置较低的
line-height
来解决这个问题,像20px
这样的东西应该可以解决问题。
Note: i included both paragraphs inside a container that i can easily float and target with my own class, as not to bother the other elements around it. 注意:我在容器中包含了两个段落,我可以轻松地浮动并使用我自己的类进行定位,以免打扰周围的其他元素。
HTML 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>
Try this: 试试这个:
CSS CSS
.notices p {
line-height:20px !important;
}
Demo: http://jsfiddle.net/N6vGZ/29/ 演示: http : //jsfiddle.net/N6vGZ/29/
You didn't include the css but I assume that you have "float: right" on your "pull-right" class. 你没有包含css,但我认为你在“右拉”课上有“浮动:正确”。
I think the easiest way to solve it is to wrap the two p's in their own div and float that dive 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>
Don't forget to set a width on the "pull-right" class in your css if you haven't already. 如果您还没有忘记在CSS中的“右拉”类上设置宽度。
You can use ul with nav class and li with pull-right 你可以使用带导航类的ul和带右拉的li
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.