Question

所以，我正在查看bootstrap文档以找到解决这个问题的解决方案，并没有找到任何结果。有没有办法，使用bootstrap组件，一个接一个地垂直显示按钮组？

这是我到目前为止所做的：

<div class="btn-toolbar" role="toolbar">
  <div class = "btn-group-vertical" id = "A">
    buttons...
  </div> <!-- button group --> 
  <div class = "btn-group-vertical" id = "B">
    buttons...
  </div> <!-- button group -->
  <div class = "btn-group-vertical" id = "C">
    buttons...
  </div> <!-- button group -->
</div> <!-- button toolbar -->

这基本上是：

A1 B1 C1
A2 B2 C2
A3 B3 C3
...

当我真正想要的时候：

A1
A2
A3
... (Break in Toolbar)
B1
B2
B3
... (Break in Toolbar)
C1
C2
C3

如果不是在bootstrap本身，如果有人知道如何做到这一点，可能有一种方法可以通过CSS实现这一点。提前谢谢！

为Clarity编辑

Answer 1

使用btn-toolbar删除顶部Div并使用btn-group-vertical

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">A1</button>
    <button type="button" class="btn btn-default">A2</button>
    <button type="button" class="btn btn-default">A3</button>
    <br /><br />
    <button type="button" class="btn btn-default">B1</button>
    <button type="button" class="btn btn-default">B2</button>
    <button type="button" class="btn btn-default">B3</button>
    <br /><br />
    <button type="button" class="btn btn-default">C1</button>
    <button type="button" class="btn btn-default">C2</button>
    <button type="button" class="btn btn-default">C3</button>
</div>

Bootstrap：垂直工具栏，用于存放btn-group-vertical组

1 个答案: