Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素。框架提供了三種其他樣式：

1、導航條中的按鈕navbar-btn

2、導航條中的文本navbar-text

3、導航條中的普通鏈接navbar-link

但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar-nav配合起來使用。而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。

先來看看這三種樣式對應的源碼：

/*源碼請查看bootstrap.css文件第3914行～第3939行*/

.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
  }
.navbar-text.navbar-right:last-child {
margin-right: 0;
  }

}

/*bootstrap.css文件第3952行～第3954行*/

.navbar-default .navbar-text {
  color: #777;
}

/*bootstrap.css文件第4035行～第4037行*/

.navbar-inverse .navbar-text {
color: #999;
}

/*boostrap.css文件第4017行～第4022行*/

.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}

/*bootstrap.css文件第4106行～第4111行*/

.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}

navbar-btn和navbar-link在上一小節已經講過，現在我們來看一下navbar-text的一個簡單應用（見右側代碼編輯區11-20行）

在結果窗口中查看效果，可以看出明顯的存在問題，通過瀏覽器調試工具，可以看到a標簽有margin-top和margin-bottom的值為15px，欲將其對齊，我們將上面的結構做一定的調整：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　    <a href="##" class="navbar-brand">慕課網</a>
　</div>
  <div class="nav navbar-nav">
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
  </div>
</div>

換換標簽就OK了。查看右側代碼結果窗口。