Html Twitter Bootstrap:导航栏中的文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9844861/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:19:02  来源:igfitidea点击:

Twitter Bootstrap: Text in navbar

htmlcsstwitter-bootstrap

提问by Hyman Frost

According to the twitter bootstrap documentation, I should be able to "Wrap strings of text in a <p>tag for proper leading and color." When I do this, at any level under navbarit simply doesn't inherit any of the navbarclasses. Wrapping the string in <a>tags renders it but it shouldn't be an anchor.

根据 twitter bootstrap文档,我应该能够“将文本字符串包装在<p>标签中以获得正确的前导和颜色”。当我这样做时,navbar它下面的任何级别都不会继承任何navbar类。将字符串包装在<a>标签中会呈现它,但它不应该是一个锚点。

The string I'm trying to render is "Logged in as ... ".

我试图呈现的字符串是"Logged in as ... ".

回答by Andres Ilich

You have to include a class along with your ptag inside of your navbar, like so:

您必须p在导航栏中包含一个类以及您的标签,如下所示:

<p class="navbar-text">Logged in as</p> 

回答by muzzamo

This was fixed in issue 2799.

这已在issue 2799中修复。

回答by Milo van Loon

I had to add <span class="navbar-text">for the format to level with the anchor tags.

我必须添加<span class="navbar-text">格式以与锚标记保持一致。

回答by Joel Wigton

None of these answers or comments worked for me (latest one was 6+ years old), but what worked for me was the following:

这些答案或评论都不适合我(最新一个是 6 岁以上),但对我有用的是以下内容:

  1. I had to use the <span>tag, not <p>
  2. I had to include the "nav-item"class on my list element itself
  1. 我必须使用<span>标签,而不是<p>
  2. 我必须"nav-item"在我的列表元素本身中包含该类

My final working code looks like this:

我的最终工作代码如下所示:

<li class="nav-item"><span class="navbar-text"><h5>{{first_name}}</h5></span></li>

Take my word for it, but the word "Sally" below does not change to hyperlink when hovered.

相信我的话,但是下面的“Sally”这个词在悬停时不会变成超链接。

enter image description here

在此处输入图片说明