Question

我希望bootstrap有一个内置功能，它会根据最大div的高度为任何项目分配包装div。

在这个fiddle示例中，您会注意到我有video-item-wrapper不同的高度打破了设计，我可以指定min-height但是我必须为不同的屏幕尺寸编写css（＆amp;它在某些时候会破裂）

我可以使用jquery获取div的最大高度并将其分配给所有video-item-wrapper潜水，以便所有div都具有相同的高度且不会破坏设计

<div class="container">
    <div class="rows v-wrapper">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />

                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff&text=>"/>
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video short video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />

                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fffplacehold" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这里我的解决方案很好，没有任何小岛..

https://fiddle.jshell.net/w75vaho2/30/show/

基于jme11用户

发表的评论的解决方案

CSS

.play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.v-wrapper {
    max-width:1000px;
    margin:0 auto;
}
.video-item-wrapper
{
    border-bottom:30px solid green;
}
.video-image-wrapper {
    position:relative;
    width:100%;
}
.video-image-wrapper .img-responsive {
    width:auto;
    position:relative;
    z-index:1;
}
.video-image-wrapper .play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index:2;
}

/* add a little bottom space under the images */

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(2n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 989px) {
    .portfolio>.clear:nth-child(4n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 990px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(8n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

<强> HTML

<div class="container">
    <div class="row v-wrapper portfolio">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video short video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
    </div>
</div>

使用jQuery（基于this）

我注意到这种方法有一个缺陷，例如假设第一个最大div高度是400px然后它适用于所有行事件中的所有div，如果它们没有多于1行标题为其他行添加必要的空间小标题，

Fiddle example

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

具有相同高度的行的Bootstrap列 - 或每行之间的相同空间

1 个答案: