使用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元素的底部

回答

相关问题