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

/*源碼請查閱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;
  }
}

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

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

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

/*源碼請查閱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;
  }
}