使用Bootstrap將元素靜態放置在span元素的底部

我目前正在研究一個涉及[3 x n]無序列表的項目，並且試圖在每個列表項的底部放置一個鏈接。問題是每個列表條目的高度對於內容都是動態的，如codepen所示。我怎麼能這樣做，以便所有的鏈接將出現對齊？使用Bootstrap將元素靜態放置在span元素的底部

來源：

<body class="container-fluid"> 
    <ul class="row-fluid"> 
    <li class="span4"> 
     <h1> Column 1 </h1> 
     <p>Lorem ipsum ... laborum.</p> 
     <a href="">Some Link</a> 
    </li> 
    <li class="span4"> 
     <h1> Column 2 </h1> 
     <p>Lorem ipsum ... consequat.</p> 
     <a href="">Some Link</a> 
    </li> 
    <li class="span4"> 
     <h1> Column 3 </h1> 
     <p>Lorem ipsum ... pariatur. </p> 
     <a href="">Some Link</a> 
    </li> 
    </ul> 

    <!-- More similar ul's --> 
</body>

來源

2014-11-04 FinnM

http://codepen.io/anon/pen/kDCwz

ul { 
    position:relative; 
    padding-bottom:20px; 
} 
a { 
    position:absolute; 
    bottom:0px; 
}

來源

2014-11-04 22:19:08

這工作，直到你嘗試在其他斷點不同堆棧li元素。 – Marcelo 2014-11-04 22:22:01

是的，但我相信他對鏈接進行排列的要求在他將li元素疊加時會消失。 – 2014-11-04 22:26:33

也許，也許不是，但由於該人沒有指定，所以闡明解決方案的侷限性很重要。 – Marcelo 2014-11-04 22:38:44

你也可以做到這一點通過一些JavaScript來設置元素的高度。

這裏是一個例子。只要每個li中有一個'p'元素，這段代碼就可以工作。另外，我給你的'ul'一個id：'列'。

var maxHeight = 0; 

//Get all the 'p' elements in each column 
var elem = document.getElementById('columns'); 
var pElems = elem.getElementsByTagName('p'); 

// Find out which p element is the tallest 
for (var i = 0; i < pElems.length; i++) { 
    if(pElems[i].offsetHeight > maxHeight) { 
    maxHeight = pElems[i].offsetHeight; 
    } 
} 

// Set all the elements to the height of the tallest element 
for (var i = 0; i < pElems.length; i++) { 
    pElems[i].style.height = maxHeight+"px"; 
}

這裏是一個codepen：http://codepen.io/anon/pen/gCGpv

來源

2014-11-04 22:44:53 Marcelo

摺疊時，段落中的文本隱藏在鏈接後面。 – FinnM 2014-11-04 23:19:44

你能再描述一下這個問題嗎？ – Marcelo 2014-11-05 15:23:07

使用Bootstrap將元素靜態放置在span元素的底部

回答

相關問題