如何在对齐的按钮组中获得按钮之间的间距？答案

【问题标题】：How can I get spacing between buttons in a justified button group?如何在对齐的按钮组中获得按钮之间的间距？
【发布时间】：2022-01-23 02:39:53
【问题描述】：

我正在尝试在 Bootstrap 按钮组中的按钮之间添加间距。我知道这可以通过使用按钮工具栏来实现，但是，我无法弄清楚如何使其合理（即填充 100% 的宽度）。这是我需要的功能，而且据我所知，只有按钮组才有可能。

下面的代码创建了一个按钮栏，它们相互连接，没有间距。我希望它们以独立按钮的形式内联显示，间距相等，宽度与文本长度成比例。

.btn-group {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="btn-group" role="group" id="indicative">
  <button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-present">present</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-preterite">preterite</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-imperfect">imperfect</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-conditional">conditional</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-future">future</button>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

欢迎使用 flexbox！

另外，为了让事情不那么拥挤......

Spacing utilities

为了这个演示......

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="d-flex bg-light border py-1" id="indicative">
  <button type="button" id="indicative-present"
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">present</button>
  <button type="button" id="indicative-preterite"
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">preterite</button>
  <button type="button" id="indicative-imperfect" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">imperfect</button>
  <button type="button" id="indicative-conditional" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">conditional</button>
  <button type="button" id="indicative-future" 
    class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">future</button>
</div>

【讨论】：

【解决方案2】：

您可以在引导按钮类中使用mx-1 来在按钮之间添加空格。

.btn-group {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="btn-group" role="group" id="indicative">
  <button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-present">present</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-preterite">preterite</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-imperfect">imperfect</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-conditional">conditional</button>
  <button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-future">future</button>
</div>

【讨论】：