带分隔符的引导按钮组

Question

如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？

<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">2</button>
</div>

https://getbootstrap.com/docs/4.6/components/button-group

@padaleiana 解决方案运行良好！我使用了一个 btn-light 禁用按钮作为分隔符。

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>