本文介绍了引导程序 3 >尝试创建具有相同高度的列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我才刚刚开始学习,所以请继续关注我,我会尽力提供尽可能多的信息.

使用 Bootstrap 3 我一直在尝试调整许多内容区域,使它们具有相同的高度.我每行有 4 个,列数未指定(我正在遍历一个 php 数组来确定这一点).基本上,无论我需要显示多少个内容区域,它们都应该使用相同的高度,或者至少与其所在行中的其他三个高度相同.

我一直在使用这个 jquery 库 > https://github.com/mattbanks/jQuery.equalHeights > 效果很好,但是每当我调整页面大小时,内容区域的高度都不会更新(如果我将屏幕拖动到新大小并点击刷新高度重新调整到正确位置)

我还研究了其他一些解决方案,例如 > Twitter Bootstrap -流体列上的高度相同,但是当我针对多行调整它时,这似乎不起作用.

任何帮助将不胜感激,无论我是应该使用 javascript 解决方案还是我可以用 CSS 做任何事情.请记住,我需要高度一致,并在屏幕调整大小时重新调整.我更愿意使用 Bootstrap 3,但如果有适用于 2 的解决方案,我将使用该版本.

<div class="row"><div id="等高"><div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"><div class="info-block"><!-- BODY BOX--><p>一行复制</p>

<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"><div class="info-block"><!-- BODY BOX--><p>很多很多复制很多很多很多复制很多很多复制很多很多复制很多很多复制

<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"><div class="info-block"><!-- BODY BOX--><p>一行复制</p>

<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"><div class="info-block"><!-- BODY BOX--><p>一行复制</p>

上面是我的html,第二个内容区复制量大

<脚本>$(window).resize(function(){$('#equalheight div').equalHeights();});$(window).resize();

上面是我的Javascript,调用了前面提到的库.

感谢您的任何帮助/建议

解决方案

您可以尝试使用 CSS 负边距(不需要 jQuery)..

.demo{底边距:-99999px;填充底部:99999px;背景色:#efefef;}#等高{溢出:隐藏;}

http://bootply.com/92230

编辑 - 另一种选择

这是另一个使用 CSS3 flexbox 规范的示例:http://www.bootply.com/126437

I've only just started learning so please stick with me and I'll try provide as much info as I can.

Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.

I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)

I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.

Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.

<div class = "container">
<div class="row">
    <div id="equalheight">

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>

    </div>
</div>

Above is my html, the second content area has the large amount of copy

<script>
    $('#equalheight div').equalHeights();
</script>

<script>
    $(window).resize(function(){
       $('#equalheight div').equalHeights();
    });
    $(window).resize();
</script>

Above is my Javascript, calling the before mentioned library.

Thanks for any help / advice

解决方案

You can try using CSS negative margins (no jQuery needed)..

.demo{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#efefef;
}

#equalheight {
    overflow: hidden;
}

http://bootply.com/92230

EDIT - another option

Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437

这篇关于引导程序 3 >尝试创建具有相同高度的列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:41
查看更多