引导网格列清除

问题描述

我很难理解引导程序中的列clearfix结构.我正在尝试创建卡布局，该布局需要布局中的所有行都具有相同的高度，但是每个条目中的内容不一定相同.您可以在此处查看我的操作示例: https://demo. eap.soa.com/content/test/staticapps.html

I'm having a hard time understanding the column clearfix structure in bootstrap. I'm trying to create a card layout, which needs the rows in the layout to all be the same height, but the content in each entry isn't necessarily the same. You can see an example of what I'm doing here: https://demo.eap.soa.com/content/test/staticapps.html

部分困难是我使用车把模板制作内容:

Part of the difficulty is that I'm using a handlebars template to produce the content:

<script id="Handlebars-Template" type="text/x-handlebars-template">
<div class="row">
  {{#each apps}}
  <div class="col-md-4">
    <h4>{{title}}</h4>
    <p>{{description}}</p>
  </div>
  {{/each}}
</div>
</script>

因此，要在每个X条目中插入一个空的清除div，甚至必须知道X应该是什么，都不容易.

So it's not easy to insert an empty clearing div every X entries, or even necessarily to know what X is supposed to be.

我可以通过在col-md-4类上使用min-height来破解它，但这看起来很丑.

I can hack it by using a min-height on the col-md-4 class, but that seems pretty ugly.

这里有什么想法吗?

谢谢.

推荐答案

我不知道此答案是否可以为您提供帮助.

I don't know if this answer can help you.

您的div内容已经按照您所说的进行了更改，因此一种方法是在文档准备就绪时询问javascript.

Your div content is already changing as you said, so a way will be to ask javascript when document is ready.

只需检查每个目标div的最大高度，并将其应用于每个div.

Just have to check the max height of each targeted div, and apply it at each div.

这是一种运行中的代码: http://bootply.com/103561

Here is a kind of code in action : http://bootply.com/103561

抱歉，对不起，因为当我编写代码时，我当时在云端，而var mini并不重要，因此应将其命名为'maxi'...

Just that, I'm sorry because when I wrote the code, I was in clouds, and the var mini is not significative, it should be named 'maxi'...

这与visu中的相同代码:

And this same code in visu :

$(document).ready(  makeDivSimilar  );

function makeDivSimilar()
{
  var mini = 0;
  $('.col-md-4').each(function(){
      if(parseInt($(this).css('height')) > mini )
      {
        mini = parseInt($(this).css('height'));
      }
  });
  $('.col-md-4').css('height',mini);
}

这篇关于引导网格列清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！