引導：對齊元素塔底

要在很短的方式解釋，這就是我想要實現：http://www.bootply.com/Muh7eahFC8#引導：對齊元素塔底

迴應式設計，有三列，並在每個底部的按鈕柱。

問題是我手動設置了列的高度，我希望整個事情能夠自動適應三列中最長的內容。

現在，我設置不同的高度根據每個視口的大小：

@media only screen and (min-width : 992px) { 
    div { 
    height: 180px; 
    } 
    div a { 
    position: absolute; 
    bottom: -40px; 
    } 
} 

@media only screen and (min-width : 1200px) { 
    div { 
    height: 140px; 
    } 
}

（給它在不同的屏幕寬度一試）

我認爲這就是我試圖實現是相當普遍的。沒有一個更聰明的方法來實現它嗎？

- 編輯

隨着@DavidG幫助下，我可以鰭一個負責任的解決方案：http://www.bootply.com/7C2WvyxNyZ 不幸興田33％是硬編碼，如果我改變的列數我將不得不更新的CSS，我發現沒辦法，在中央各列的按鈕

來源

2014-10-08 opensas

所以你只是想讓這3個錨點位於列的底部？你希望頁面看起來更小的寬度？ – DavidG 2014-10-09 00:03:16

如果你使用相同的內部列創建了一個額外的行，並給它一個底部的CSS屬性呢？ – Pete 2014-10-09 00:07:10

@Pete它無法響應。 – DavidG 2014-10-09 00:08:09

不記得在那裏我得到了這個片段，但是這會讓你列在同一高度：

.row { 
    display: table; 
} 

[class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
}

然後一對夫婦的調整，你可以強制a nchors被固定在div的底部。

http://www.bootply.com/crLlXiiKqk

來源

2014-10-09 00:25:30 DavidG

不錯的解決方法，我會試試看。我注意到的一件事是寬度不再受到尊重，即每列應具有相同的寬度（col-md-4），但第一個寬度更寬，請嘗試單擊移動圖標... – opensas 2014-10-09 03:02:35

我添加了媒體查詢以使其響應。它工作正常，但我很驚訝，它有多複雜，它結束了......看看它：http://www.bootply.com/mSxIMFgHSi#不幸的是，33％是硬編碼... – opensas 2014-10-09 03:08:05

啊，好的現貨，很好！ – DavidG 2014-10-09 07:57:37

引導：對齊元素塔底

回答

相關問題