twitter-bootstrap Twitter Bootstrap 3 相同高度的流体网格布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19595706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 same height fluid grid layout?
提问by Peter Hyman
I need same height to layout box product in my website ! you can see image below
我需要相同的高度来在我的网站上布局盒子产品！你可以看到下面的图片
when im using "clearfix" for break like it work fine , so when display in small sreen (mobile device) this same like image below , i think problem for height of the box !
当我使用“clearfix”进行中断时它工作正常，所以当在小屏幕（移动设备）中显示与下图相同时，我认为盒子的高度有问题！
because i load product in mysql data below code
因为我在代码下面的 mysql 数据中加载产品
<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 } ?>
i need all box is same height to display like in my design ! any idea for this !
我需要所有盒子的高度都和我的设计一样高！对此有何想法！
回答by kinopyo
If you don't want to truncate the content, there are 2 possible ways to deal with it.
如果您不想截断内容，有 2 种可能的方法来处理它。
1. use <div class="clearfix visible-xs"></div>
1.使用 <div class="clearfix visible-xs"></div>
suggested here: https://github.com/twbs/bootstrap/issues/9454
这里建议：https: //github.com/twbs/bootstrap/issues/9454
It's easy to understand, but generates empty clearfix divs, which I personally consider it's polluting the markup. Plus if you're looping the collection dynamically things could get worse, you may end up using code like this:
这很容易理解，但会生成空的 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. use css nth-child selector
2. 使用 css nth-child 选择器
First suggested in this issue: https://github.com/twbs/bootstrap/issues/9454
本期首次建议：https: //github.com/twbs/bootstrap/issues/9454
It's reusable, keep the code clean, but have to add extra stuff to make it work. Also have to remember the one tiny syntax for it: <div class="row multi-columns-row">
它是可重用的，保持代码干净，但必须添加额外的东西才能使其工作。还必须记住它的一个小语法：<div class="row multi-columns-row">
https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing
https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing
I encountered the same issue, for me I probably will go the 2nd solution.
我遇到了同样的问题，对我来说我可能会去第二个解决方案。
回答by tomByrer
IMHO one of these libs would be a better solution:
恕我直言，这些库之一将是更好的解决方案：
回答by Joel Enanod Jr
Just put clearfix in every iteration you want to fix something like that...
只需在每次迭代中放置 clearfix 即可修复类似的问题...
this example will work perfectly:
这个例子将完美地工作：
<div class="row">
<?php
$i = 0;
foreach($contens as $content){
if(($i + 1) % 2 == 0 && ($i + 1) % 4 == 0){
?>
<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>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<?php }else if(($counterpopular + 1) % 4 == 0){ ?>
<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>
<div class="clearfix visible-md-block"></div>
<?php }else if(($counterpopular + 1) % 2 == 0){ ?>
<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>
<div class="clearfix visible-xs-block"></div>
<?php }else{ ?>
<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
} $i++; }
?>
回答by Benjamin
You need to give the divs a fixed height, or else they'll change to accept the content.
你需要给 div 一个固定的高度，否则它们会改变以接受内容。
ie
IE
.image { height: 200px; }
.image { 高度：200 像素；}
You'll then want to find a way to truncate the content to fit the fixed height.
然后，您需要找到一种方法来截断内容以适合固定高度。
You could set overflow: hidden, but that might cut off important stuff. You might want to simply truncate the text. CSS-Tips has info about that here: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
您可以设置溢出：隐藏，但这可能会切断重要的内容。您可能只想截断文本。CSS-Tips 有关于这里的信息：http: //css-tricks.com/snippets/css/truncate-string-with-ellipsis/
