實(shí)現(xiàn)原理并不難，列表（<ul>）上設(shè)置寬度為“100%”，然后每個(gè)菜單項(xiàng)(<li>)設(shè)置了“display:table-cell”，讓列表項(xiàng)以模擬表格單元格的形式顯示：

/*源碼請(qǐng)查閱bootstrap.css文件第3585行～第3607行*/

.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
  display: table-cell;
  width: 1%;
  }
  .nav-justified > li > a {
  margin-bottom: 0;
  }
}

這里有一個(gè)媒體查詢條件：“@media (min-width:768px){…}”表示自適應(yīng)導(dǎo)航僅在瀏覽器視窗寬度大于768px才能按上圖風(fēng)格顯示。當(dāng)你的瀏覽器視窗寬度小于768px的時(shí)候，將會(huì)按下圖的風(fēng)格展示：

注：在最右側(cè)代碼窗口中設(shè)置全屏可以切換效果。

從上圖效果可以得知，“nav-tabs”和“nav-justified”配合在一起使用，也就是自適應(yīng)選項(xiàng)卡導(dǎo)航，瀏覽器視窗寬度小于768px時(shí)，在樣式上做了另外的處理。

/*源碼請(qǐng)查閱bootstrap.css文件第3519行～第3562行*/

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
  }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
  }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
  }
}