所以对某些人来说这似乎是一个显而易见的问题,但在响应式网格中对齐多功能跨度内容的最佳做法是什么？我知道你可以简单地设置一个像素高度,但是这样做会不会阻止保持响应的目的？ 以下面的屏幕截图为例：
... . . 所以对某些人来说这似乎是一个显而易见的问题,但在响应式网格中对齐多功能跨度内容的最佳做法是什么？我知道你可以简单地设置一个像素高度,但是这样做会不会阻止保持响应的目的？
以下面的屏幕截图为例：
<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,faucibus sagittis pharetra.</p> </div> <div class="span3 well"><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean accumsan feugiat libero.</p> </div> </div> </div>
你可以找到相关的JSfiddle here.
注意：由于某些原因,在这个JSFiddle中似乎打破了响应性,但是在我自己的Twitter Bootstrap应用程序中工作正常.
.解决方法
. 虽然您的标记不能保持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 https://stackoverflow.com/a/11299934/1478467 */ box-sizing: border-box;} 如果你想设置填充,边距,边框(实际占用空间的样式),它应该应用于真实的和虚假的 – 而不是列本身,而是他们的孩子.
缺点是(因为它在演示中)你必须坚持无响应网格(流体或静态).但它应该与媒体查询中封装的更多规则一起使用.
更新
如果你将.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; }}. . .. ...
