我需要相同的高度来布局我的网站产品！你可以看到下面的图片
当im使用“clearfix”作为休息像它工作正常,所以当显示在小屏幕(移动设备)这同样像下面的图像,我认为问题的高度的盒子！
<div class="row"> <?PHP foreach($contens as $content){?> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="contents-block"> <div class="image"><img href="<?PHP echo $content['image'];?>" /> </div> ................ some code ............. </div> </div> <?PHP } ?>
我需要所有的盒子是相同的高度显示像我的设计！
任何想法为此！
解决方法
如果您不想截断内容,有两种可能的方法来处理它.
1.使用< div class =“clearfix visible-xs”>< / div>
建议在这里：https://github.com/twbs/bootstrap/issues/9454
很容易理解,但生成空的clearfix div,我个人认为这是污染标记.此外,如果您动态地循环收集,可能会变得更糟,您最终可能会使用如下代码：
<% @posts.each do |post| %>
<div class="col-sm-6 col-md-4">
<%= post.body %>
</div>
<% unless index == 0 %>
<% # add a visible clearfix every 3 posts in medium ~ large screen,respond to col-md-4 %>
<% if index % 2 == 0 %>
<div class="clearfix visible-md visible-lg"></div>
<% # add a visible clearfix every 2 posts in small screen,respond to col-sm-6 %>
<% elsif index % 1 == 0 %>
<div class="clearfix visible-sm"></div>
<% end %>
<% end %>
<% end %>
2.使用css第n个子选择器
这个问题首先提出：https://github.com/twbs/bootstrap/issues/9454
它是可重用的,保持代码干净,但必须添加额外的东西,使其工作.还必须记住它的一个微小的语法：< div class =“row multi-columns-row”>
https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing
我遇到同样的问题,对我来说,我可能会去第二个解决方案.
