带分隔符的 Bootstrap 按钮组

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和类（左右边距和填充 = 0）的按钮，并带有属性（否则“分隔符”将不会出现！pl-0）pr-0disabled

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