如何在对齐按钮组中获得按钮之间的间隔？

Question

我试图在一个引导按钮组中添加按钮之间的间距。我知道这是可能的使用按钮工具栏代替，然而，我不知道如何使这是合理的(即。填充宽度为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>

​

Answer 1

欢迎来到柔性箱！

• 启用flex行为
• 挠曲填充

还有，为了让事情不那么拥挤.

• 间距公用设施

为了这个演示..。

• 背景颜色
• 边框

​

<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>

​

Answer 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>

​