带分隔符的引导按钮组

Answer 1

解决方法：

创建一个带有

mr-0

、

ml-0

、

pl-0

和

pr-0

类的按钮（左右边距和填充 = 0），并带有

disabled

属性（否则“分隔符”将不会出现！）

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
  <button type="button" class="btn btn-secondary">3</button>
</div>

Answer 2

padaleiana 的答案的替代方案如下，它不使用 HTML 按钮标签。因此，当 jQuery（或其他 Javascript）迭代按钮时，它可以避免出现问题：

<div class="alert alert-dark m-0 px-0"></div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <div class="alert alert-dark m-0 px-0"></div>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="alert alert-dark m-0 px-0"></div>
  <button type="button" class="btn btn-secondary">3</button>
</div>

Answer 3

可以只添加类“btn-outline-secondary”或任何一个适合您需要的每个按钮......例如：-

<div class="btn-group btn-group-sm">
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button>
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button>
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button>
</div>