Twitter Bootstrap首选方式来控制跨度内容

Question

所以对某些人来说这似乎是一个显而易见的问题,但在响应式网格中对齐多功能跨度内容的最佳做法是什么？我知道你可以简单地设置一个像素高度,但是这样做会不会失去保持事物响应的目的？

以下面的屏幕截图为例:

<div class="container">
    <div class="row">
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra non, egestas sit amet nulla.</p></div>
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra.</p> </div>
       <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero.</p> </div>
    </div>    
</div>

你可以在这里找到相关的JSfiddle .

注意:由于某些原因,在这个JSFiddle中似乎打破了响应性,但是在我自己的Twitter Bootstrap应用程序中工作正常.

Answer 1

如果你看看我工作的网站DigitalLabs,那么如果你看一下配置文件,我会遇到类似的错误 - 我希望它们都是相同的高度.

在这里查看我的JSFiddle:http: //jsfiddle.net/LDtRr/2/

(向下滚动到底部并按调整大小以查看它们全部动态调整大小)

我使用了一些javascript来修复高度 - 我将向您展示我使用的代码.

function resize(resize, resizeinner) {
var max = 0;

//reset height back to 0
$(resize).each(function(index, element) {
    $(element).css({ 'height' : '0' });
});

//find height of the profiles
$(resizeinner).each(function(index, element) {
    var height = $(element).height();
    console.log('    height=' + height);
    if(height > max) {
        max = height;
    }

});

//set the height dynamically based on the maximum so they are all uniform
$(resize).each(function(index, element) {
    $(element).css({ 'height' : max });
    console.log('    resizedTo=' + $(element).height());
});

console.log('max - ' + max);
}

然后为我使用的HTML

<div class="span4">
    <div class="well profile">
        <div class="profile-resize">
            <!-- content -->
        </div>
     </div>
 </div>

代码所做的是它获取具有配置文件类的div的最大高度,然后将具有该类的所有div设置为最大高度 - 您还可以将其绑定到窗口调整大小,以便它自动调整窗口的高度.

$(window).load(function() { 
//initially size the elements
resize('.profile', '.profile-resize');
});

也许不是最优雅的解决方案,但我当时想不出更好的解决方案.