Bootstrap 下拉菜單之鈕組的大小

按鈕組允許多個按鈕被堆疊在同一行上。當(dāng)你想要把按鈕對齊在一起時，這就顯得非常有用。您可以通過 Bootstrap 按鈕（Button） 插件 添加可選的 JavaScript 單選框和復(fù)選框樣式行為。

下面的表格總結(jié)了 Bootstrap 提供的使用按鈕組的一些重要的 class：

<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

<div class="btn-group-vertical">
  ...
</div>

基本的按鈕組

<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
</div>

按鈕工具欄

下面的實例演示了上面表格中討論到的 class .btn-toolbar 的使用：

<div class="btn-toolbar" role="toolbar">
<div class="btn-group-lg">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
 </div>
<div class="btn-group-sm">
    <button type="button" class="btn btn-default">按鈕 4</button>
    <button type="button" class="btn btn-default">按鈕 5</button>
    <button type="button" class="btn btn-default">按鈕 6</button>
</div>
<div class="btn-group-xs">
    <button type="button" class="btn btn-default">按鈕 7</button>
    <button type="button" class="btn btn-default">按鈕 8</button>
    <button type="button" class="btn btn-default">按鈕 9</button>
</div>
</div>

結(jié)果如下所示：