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

1、導(dǎo)航條中的按鈕navbar-btn

2、導(dǎo)航條中的文本navbar-text

3、導(dǎo)航條中的普通鏈接navbar-link

但這三種樣式在框架中使用時(shí)受到一定的限制，需要和navbar-brand、navbar-nav配合起來(lái)使用。而且對(duì)數(shù)量也有一定的限制，一般情況在使用一到兩個(gè)不會(huì)有問(wèn)題，超過(guò)兩個(gè)就會(huì)有問(wèn)題。

先來(lái)看看這三種樣式對(duì)應(yīng)的源碼：

/*源碼請(qǐng)查看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在上一小節(jié)已經(jīng)講過(guò)，現(xiàn)在我們來(lái)看一下navbar-text的一個(gè)簡(jiǎn)單應(yīng)用（見(jiàn)右側(cè)代碼編輯區(qū)11-20行）

在結(jié)果窗口中查看效果，可以看出明顯的存在問(wèn)題，通過(guò)瀏覽器調(diào)試工具，可以看到a標(biāo)簽有margin-top和margin-bottom的值為15px，欲將其對(duì)齊，我們將上面的結(jié)構(gòu)做一定的調(diào)整：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　    <a href="##" class="navbar-brand">慕課網(wǎng)</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>

換換標(biāo)簽就OK了。查看右側(cè)代碼結(jié)果窗口。