Question

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

以下面的屏幕截图为例：

varying span content

<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 here。

注意：由于某种原因，在这个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');
});

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

Answer 2

虽然您的标记没有保留bootstrap doc（.container > .row > .span > .well）推荐的层次结构，但您是否考虑过绝对定位？没有JS参与。

Demo (jsfiddle)

<div class="container" style="position: relative;">
    <div class="row faux-row">
        <div class="span3 well"></div>
        <div class="span3 well"></div>
        <div class="span3 well"></div>
    </div>
    <div class="row vrai-row">
        <div class="span3"><p>...</p></div>
        <div class="span3"><p>...</p></div>
        <div class="span3"><p>...</p></div>
    </div>
</div>

.vrai-row { position: relative;z-index: 101; }

.faux-row { position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 100; }
.faux-row .well {
    height: 100%;
    /* The following is because .span* elements should not have paddings, margins nor borders see http://stackoverflow.com/a/11299934/1478467 */
    box-sizing: border-box;
}

如果你想设置填充，边距，边框（实际占用空间的样式），它应该应用于真实的那个和 faux - 不是列本身，而是它们的子节点示例

缺点是（因为它在演示中）你必须坚持无响应网格（流体或静态）。但它应该与媒体查询中封装的更多规则一起使用。

<小时/>

更新

如果你在所有跨度上保持.well课程，那么响应能力实际上并不难获得：

Demo responsive (jsfiddle)

@media (max-width: 767px) {
    .faux-row { display: none!important; }
}
@media (min-width: 768px) {
    .vrai-row .well { /* Deactivate well styles */
      background-color: transparent;
      border-color: transparent;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    }
}

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

2 个答案:

更新