Html 文本未与引导程序的导航栏文本右拉正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10508466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text not aligning properly with bootstrap's navbar-text pull-right
提问by test123
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/
回答by Andres Ilich
The reason both paragraphs are not aligning properly in the navbar is because the default line-heightof 40pxset forth by the bootstraps doesn't allow them both to stack correctly. You can fix that by setting a lower line-height, something like 20pxshould do the trick.
这两段没有在导航栏正确对齐的原因是因为默认line-height的40px设置提出由白手起家不允许他们既要正确地叠加。你可以通过设置一个较低的来解决这个问题，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;
}
回答by J. Greene
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 中的“pull-right”类上设置宽度。
回答by Seb Cesbron
You can use ul with nav class and li with pull-right
您可以将 ul 与 nav 类一起使用，将 li 与 pull-right 一起使用
