Bootstrap CSS - 产品阵容

Question

对于平板电脑视图，行中有一行产品而不是连续3行。我怎样才能解决这个问题？附上截图。

<div style="text-align: justify; padding-top: 10px;" class="col-md-2 col-sm-4 col-xs-6">
<?php $prdurl = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).$_product->getData('configurable_image_url'); ?>
<a href="<?php echo $prdurl; ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
<br>
<?php echo $_product->getName();  ?>
<br>
<?php echo $_product->getbasic_sku();  ?>
<br>

<?php if(!Mage::getSingleton('customer/session')->isLoggedIn()): ?>

        

    

谢谢

Answer 1

这是由于div的高度差异（包含移动图片和细节）。 因此，为了解决这个问题，你必须给所有div一个固定的高度 并且您可以使用滚动

显示更多详细信息

为所有div调用一个公共类并给出这个属性。

height: Y px(give appropriate value for the Y),
overflow: auto,

我认为这会为你做到， 如果你分享代码，我可以帮助你更多。

Answer 2

Bootstrap有一种处理此问题的机制： Responsive column resets

以适当的间隔插入清除元素以正确清除每列。