4

所以这对某些人来说似乎是一个显而易见的问题，但是在响应式网格中对齐通用跨度内容的最佳实践是什么？我知道你可以简单地设置一个像素高度，但这不会破坏保持响应的目的吗？

以下面的截图为例：

变化的跨度内容

<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 应用程序中工作正常。

4

2 回答 2

5

如果您查看我工作的网站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');
});

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

于 2012-11-20T20:25:09.113 回答
2

尽管您的标记没有保持引导文档 ( .container > .row > .span > .well) 推荐的层次结构，但您是否考虑过绝对定位？不涉及 JS。

演示（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;
}

如果要设置填充、边距、边框（实际占用空间的样式），则应将其应用于真实的和虚假的 - 不是列本身，而是它们的子项。

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

更新

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

演示响应（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;
    }
}
于 2012-11-20T23:39:25.497 回答