在导航栏引导程序之上添加文本的正确方法

时间:2017-06-08 05:10:10

标签: css twitter-bootstrap-3 navbar

我尝试在ul标签后添加此代码:

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

但我得到了这些结果

bootstrap navbar.

在联系人下面或顶部添加文字的正确方法是什么?

2 个答案:

答案 0 :(得分:1)

只需在 nav 标记

之前或之后添加 div 标记

见下文。

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

答案 1 :(得分:0)

试试此代码

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;
        }

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