带按钮的Bootstrap上拉下拉（也称为垂直对齐）

Question

我有一排水平的引导按钮。 按钮有两种尺寸 - 中型和小型。 我希望小按钮垂直堆叠，以便 2个小按钮占据与一个中按钮相同的垂直空间。 所以这是一个中等按钮：

      <a class="btn btn-lg top-buffer align-root half-width double-height btn-primary " id="WID020" href="#">&nbsp;
        <div id="EL034">
            <h6 class="align-bottom-left text-default ">MD. BTN</h6>
        </div>
        <div id="EL033">
            <i class="fa align-center-center fa-car fa-2x text-default"></i>
        </div>
      </a>

这里有两个小按钮放入btn-group-vertical：

     <div class="btn-group-vertical ">
        <div>
          <a class="btn btn-lg top-buffer align-root quarter-width btn-danger" style="vertical-align: top; display: table-cell;  " id="WID021" href="#">&nbsp;
            <div id="EL040"><i class="fa align-center-center fa-volume-up fa-6x text-default"></i></div>
          </a>
        </div>
        <div>
          <a class="btn btn-lg top-buffer align-root quarter-width btn-warning" style="vertical-align:bottom; display: table-cell; position:relative;" id="WID021" href="#">&nbsp;
            <div id="EL040"><i class="fa align-center-center fa-volume-down fa-6x text-default"></i></div>
          </a>
        </div>
     </div>

现在了！我想要这两个按钮组中的顶部按钮，对齐顶部和底部按钮以对齐底部。

经过多次黑客攻击后，我设法让顶部的小按钮移动到顶部垂直对齐。我不知道这是否是正确的方法，但似乎有效：

style="vertical-align: top; display: table-cell;"

但是底部按钮仍然是一个顽固的挑战。任何想法如何做到这一点并留在bootstrap / css土地？也许答案在于flexbox？

这是一个bootply：bootply demo

问题是橙色按钮！

Answer 1

在您的演示中，间距工作正常，因此这可能是浏览器问题;我正在使用chrome v61.0.3163.79作为参考。

如果这不是问题，您可以尝试远离btn-group-vertical，因为这可能会覆盖单独的路线。

最后，如果你正在使用Bootstrap 4（不幸的是，我不是，所以我无法验证这一点），this may help you:。看起来他们在bootstrap 4中添加了一些垂直对齐类，在这些情况下可能会有用。