一张图片胜过千言万语......
结构:
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 text-center column-fix">
<div class="row-fluid">
<div class="row-fluid">
<div class="image">
<img src.... />
</div>
</div>
<div class="row-fluid">
<div class="category-link">
<a href...></a>
</div>
</div>
</div>
</div>
...
</div>
输出:
基本上,当列高于其他列时,会导致订单中断。我知道这是浮点运算的方式,但我需要一个漂亮而干净的解决方案。目前,这是我的解决方法:
.column-fix {
float: none !important;
display: inline-block !important;
margin: 0 -0.125em !important;
vertical-align:top;
}
这是我通过修复获得的输出:
有没有一个很好的解决方案可以覆盖所有宽度的所有列而无需为每个元素设置自定义类?我希望bootstrap col- *类的行为类似于内联块而不是浮点数。