ㄧ.按鈕群組

<div id="demo" class="component">
 <div class="btn-group">
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-secondary">2</button>
  <button class="btn btn-secondary">3</button>
 </div>
</div>
 

.component.demo{
 padding: 50px;
}

重點：
1.現在出現的為按鈕群組，只要裡面包多個.btn在父元素加入btn-group

二.按鈕群組尺寸

<div id="demo" class="component">
    <div class="btn-group btn-group-sm">
      <button class="btn btn-secondary">1</button>
      <button class="btn btn-secondary">2</button>
      <button class="btn btn-secondary">3</button>
    </div>
</div>
 

.component.demo{
 padding: 50px;
}

重點：
1.包裝上可以用尺寸的類，讓按鈕變小變大也是一樣的尺寸模式.btn-group-sm .btn-group-lg

三.按鈕群組尺寸

<div id="demo" class="component">
    <div class="btn-group-vertical btn-group-sm">
      <button class="btn btn-secondary">1</button>
      <button class="btn btn-secondary">2</button>
      <button class="btn btn-secondary">3</button>
    </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.如果要垂直顯示要將原本的btn-group改成btn-group-vertical

codepen
參考：bootstrap4