如何让两个Bootstrap btn-group按钮组在同一行显示

你遇到的问题是因为每个独立的.btn-group默认是块级元素（占满整行宽度），所以会自动换行。这里有两种简单的解决方案，根据你的需求选择：

方案1：合并到同一个按钮组（推荐，结构更简洁） #

如果不需要把按钮分成独立的功能组，直接把所有按钮放到**同一个.btn-group**容器里，Bootstrap会自动让它们横向排列：

<div class="btn-group">
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck1">RED </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck2">BLUE </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac1">Mac1 </label>
  <!-- 这里添加剩下的按钮 -->
</div>

方案2：保留独立按钮组，改为行内显示 #

如果需要保留多个.btn-group的结构（比如后续要给不同组加独立的样式或交互），可以给每个.btn-group添加Bootstrap的行内flex工具类d-inline-flex，让它们从块级元素变成行内元素，从而在同一行排列：

<div class="btn-group d-inline-flex">
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck1">RED </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck2">BLUE </label>
</div>
<div class="btn-group d-inline-flex">
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac1">Mac1 </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac2">Mac2 </label>
</div>

原理说明 #

Bootstrap的.btn-group默认样式是display: flex; width: 100%;，这意味着每个按钮组会独占一行。添加d-inline-flex后，它会变成display: inline-flex，不再占满整行，多个按钮组就能并排显示了。你也可以用d-inline-block替代d-inline-flex，不过flex布局在按钮对齐上会更自然。

内容的提问来源于stack exchange，提问作者user8373379