ボタンでのブートストラッププルアッププルダウン（別名垂直アライメント）

Question

私は水平方向のブートストラップボタンの列を持っています。 ボタンには中と小型の2種類のサイズがあります。 小さなボタンを縦に積み重ねて、2つの小さいボタンが1つの中ボタンと同じ縦のスペースを占めるようにします。今

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

落とし穴：

 <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に入れて二つの小さなボタンがあります： だからここにメディアボタンです！私は、この2つのボタングループの上のボタンを、上のボタンと一番下のボタンのグループに合わせて、下のボタングループに合わせたいとします。

多くのハッキングを行った後、上部の小さなボタンを上に縦に整列させるように管理しました。これはそれを行うための正しい方法であるかどうかは知りませんが、それは動作するようです：

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

が、下のボタンは、頑固な課題です。どのようにこれを行うとブートストラップ/ CSSの土地に滞在する任意のアイデア？答えはflexboxにあるのでしょうか？ここ

はbootplyです：bootply demo

問題は、オレンジ色のボタンです！

Answer 1

デモでは、スペーシングがうまく動作するため、ブラウザの問題である可能性があります。私は参照のためにクロムv61.0.3163.79を使用しています。

これが問題でない場合は、別のアライメントを上書きしている可能性があるので、btn-group-verticalから離れてみてください。

最後に、ブートストラップ4を使用している場合（残念ながら、私はそうではないため、これを確認できません）、this may help you:です。これは、ブートストラップ4にいくつかの垂直方向のアラインメントクラスを追加したようです。