Twitter bootstrap 带按钮的自举上拉下（也称为垂直对齐）

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

      <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>

现在我明白了！我希望这两个按钮组中的顶部按钮与顶部对齐，底部按钮与底部对齐

经过多次修改，我设法使顶部的小按钮在顶部垂直对齐。我不知道这是否是正确的方法，但它似乎有效：

style=“垂直对齐：顶部；显示：表格单元格；”

但底部按钮仍然是一个棘手的挑战。你知道如何做到这一点并保持在bootstrap/css领域吗？也许答案就在一个

flexbox

下面是一个引导程序：

问题是橙色按钮！

---

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

如果这不是问题，您可以尝试从btn组垂直移动，因为这可能会覆盖单独的路线

最后，如果您使用的是Bootstrap4（不幸的是，我不是，所以我无法验证这一点）。看起来他们在Bootstrap4中添加了一些垂直对齐类，这些类在这些情况下可能会很有用

     <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>