css - 带分隔符的 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 , 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>