Question

我正在尝试使用btn-toolbar组合按钮（不使用btn-group，因为我想要不同的按钮），我还想在每个按钮的顶部添加标签，但我无法实现我想要的。这是代码片段。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
</div>

here is picture of what i am expecting

Answer 1

你可以用这个

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
</div>

我可能不完全正确..尝试使用一些分离技术。

Answer 2

这是您需要的解决方案。它按照您显示的图像工作

{{1}}

按钮组与每个按钮顶部的标签

2 个答案: