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>

Bootstrap 个带分隔符的按钮组

Bootstrap button groups with separators

css

border

button

twitter-bootstrap

bootstrap-4