在导航栏引导程序顶部添加文本的正确方法答案

【问题标题】：Proper way to add text on top of navbar bootstrap在导航栏引导程序顶部添加文本的正确方法
【发布时间】：2017-06-08 18:37:00
【问题描述】：

我尝试在 ul 标记后添加此代码：

<p class="navbar-text pull-right">
    <strong>Toll Free Num: 1 300 22 6868</strong>
</p>

但我得到了这些结果

bootstrap navbar.

在联系人下方或顶部添加文本的正确方法是什么？

【问题讨论】：

欢迎来到stackoverlfow。阅读：stackoverflow.com/help/how-to-ask

标签： css twitter-bootstrap-3 navbar

【解决方案1】：

试试这个代码

html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">services</a></li>
      <li><a href="#">portfolio</a></li>
      <li>
        <div class="tollfree">toll free</div>
        <a href="#">contact</a>
    </li>
    </ul>
  </div>
</nav>

css

ul.navbar-nav li
        {
        position:relative;
        }
        .tollfree
        {
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        }

相应地设置导航栏链接的样式希望这会有所帮助

【讨论】：

【解决方案2】：

只需在nav标签之前或之后添加div标签

见下文。

 <div class="text-right"><strong>Toll Free Num: 1 300 22 6868</strong></div>

【讨论】：