很多時(shí)候，我們常把下拉菜單和普通的按鈕組排列在一起，實(shí)現(xiàn)類(lèi)似于導(dǎo)航菜單的效果。如下所示：

使用的時(shí)候，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級(jí)。如下所示：

<div class="btn-group">
<button class="btnbtn-default" type="button">首頁(yè)</button>
<button class="btnbtn-default" type="button">產(chǎn)品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯(lián)系我們</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button>
   <ul class="dropdown-menu">
         <li><a href="##">公司簡(jiǎn)介</a></li>
         <li><a href="##">企業(yè)文化</a></li>
         <li><a href="##">組織結(jié)構(gòu)</a></li>
         <li><a href="##">客服服務(wù)</a></li>
    </ul>
</div>
</div>

實(shí)現(xiàn)的樣式代碼：

/*查看bootstrap.css文件第3192行～第3223行*/

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}