引導拉下拉（又名垂直取向）與按鈕

我有自舉按鈕的水平行中。這些按鈕有兩種尺寸 - 中，小。我想要的小按鈕，垂直堆疊，使得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

引導拉下拉（又名垂直取向）與按鈕

回答

相關問題