引导拉下拉（又名垂直取向）与按钮

我有自举按钮的水平行中。这些按钮有两种尺寸 - 中，小。我想要的小按钮，垂直堆叠，使得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

的问题是橙色按钮！

来源

2017-03-06 skavan

在您的演示，间距正常工作，所以这可能是一个浏览器的问题;我使用的是Chrome v61.0.3163.79，供参考。

如果这不是问题，你可以尝试移动从BTN-组垂直位置，因为这可能是压倒一切的独立路线。

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

来源

2017-09-19 13:15:31 user3785205

引导拉下拉（又名垂直取向）与按钮

回答

相关问题