Question

在我构建的在线商店类别页面上，我使用Twitter Bootstrap网格系统来构建产品目录页面。该页面可在此处查看：http://sergedenimes.com/shop/?view=all

基本上，在正常的桌面浏览器宽度中，类col-md-4表示每个产品div占据列宽的1/3，这允许3在每行上堆叠。所有产品divs都在一行上，以便col-sm-6类在较小的屏幕上每行产生2个。

在Chrome上，结果如下所示：

enter image description here

然而，在Firefox上似乎或两个div正在跳过前两个div并将自己定位在第三个下方，在其左侧留下空白区域，此行上只有一个产品。像这样：

enter image description here

检查了源和计算的css后，所有的div都是相同的高度和宽度，我似乎无法找出它的行为是这样的，特别是因为它只是正常的Bootstrap标记。任何人都可以解释为什么Firefox正在渲染这样的页面以及我如何解决它？

修改

以下是相关代码。为广泛的类和属性道歉

<div class="post-22064 product type-product status-publish has-post-thumbnail col-md-4 col-xs-6 top-buffer pif-has-gallery taxable shipping-taxable purchasable product-type-variable product-cat-bomber-jackets instock"> <a href="http://sergedenimes.com/shop/bomber-jackets/wolf-bomber-jacket/">

        <img width="240" height="330" src="http://sergedenimes.com/wp-content/uploads/2014/11/SDN-18-1-240x330.jpg" class="attachment-shop_catalog wp-post-image" alt="SDN-18 (1)">
            <img width="240" height="330" src="http://sergedenimes.com/wp-content/uploads/2014/11/IMG_1042-240x330.jpg" class="secondary-image attachment-shop-catalog" alt="IMG_1042" />       
            <div class="catalog-info">
        <h3>Wolf Bomber Jacket</h3>
    <span class="price"><span class="amount">&pound;125.00</span></span>
        </div>
    </a>

</div>
<div class="post-20523 product type-product status-publish has-post-thumbnail col-md-4 col-xs-6 top-buffer last pif-has-gallery taxable shipping-taxable purchasable product-type-variable product-cat-so-serge product-cat-sweatpants instock"> <a href="http://sergedenimes.com/shop/so-serge/so-serge-sweatpants/">

        <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/09/SDN21-38-193x265.jpg" class="attachment-shop_catalog wp-post-image" alt="SDN21-38">
            <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/09/IMG_8080-193x265.jpg" class="secondary-image attachment-shop-catalog" alt="IMG_8080" />       
            <div class="catalog-info">
        <h3>So Serge Sweatpants</h3>

    <span class="price"><span class="amount">&pound;60.00</span></span>
        </div>
    </a>

</div>
<div class="post-20904 product type-product status-publish has-post-thumbnail col-md-4 col-xs-6 top-buffer first pif-has-gallery taxable shipping-taxable purchasable product-type-variable product-cat-sweatpants instock">    <a href="http://sergedenimes.com/shop/sweatpants/sdn-camo-sweatpants-pre-order/">

        <img width="240" height="330" src="http://sergedenimes.com/wp-content/uploads/2014/09/SDN-29-1-e1415103678561-240x330.jpg" class="attachment-shop_catalog wp-post-image" alt="SDN-29 (1)">
            <img width="240" height="330" src="http://sergedenimes.com/wp-content/uploads/2014/09/IMG_8995-copy-240x330.jpg" class="secondary-image attachment-shop-catalog" alt="IMG_8995 copy" />
            <div class="catalog-info">
        <h3>SDN Camo Sweatpants</h3>


    <span class="price"><span class="amount">&pound;65.00</span></span>
        </div>
    </a>

</div>
<div class="post-17753 product type-product status-publish has-post-thumbnail col-md-4 col-xs-6 top-buffer pif-has-gallery taxable shipping-taxable purchasable product-type-variable product-cat-harvey-nichols-exclusive-2 product-cat-t-shirts instock"> <a href="http://sergedenimes.com/shop/harvey-nichols-exclusive-2/vertical-symbol-print-t-shirt/">

        <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/05/501309_black_1-193x265.jpg" class="attachment-shop_catalog wp-post-image" alt="501309_black_1">
            <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/05/MG_8210-Edit-copy-193x265.jpg" class="secondary-image attachment-shop-catalog" alt="_MG_8210-Edit-copy" />    
            <div class="catalog-info">
        <h3>Vertical Symbol Print T-Shirt</h3>
    <span class="price"><span class="amount">&pound;55.00</span></span>
        </div>
    </a>

</div>
<div class="post-17786 product type-product status-publish has-post-thumbnail col-md-4 col-xs-6 top-buffer last pif-has-gallery taxable shipping-taxable purchasable product-type-variable product-cat-harvey-nichols-exclusive-2 product-cat-t-shirts instock"> <a href="http://sergedenimes.com/shop/harvey-nichols-exclusive-2/panel-symbol-print-t-shirt/">

        <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/05/500774_black_1-193x265.jpg" class="attachment-shop_catalog wp-post-image" alt="500774_black_1">
            <img width="193" height="265" src="http://sergedenimes.com/wp-content/uploads/2014/05/MG_8215-Edit-copy-193x265.jpg" class="secondary-image attachment-shop-catalog" alt="_MG_8215-Edit-copy" />
            <div class="catalog-info">
        <h3>Panel Symbol Print T-Shirt</h3>
    <span class="price"><span class="amount">&pound;55.00</span></span>
        </div>
    </a>

</div>

我知道有些图片尺寸不同但我认为应用于图片的css规则width:100%; height:auto;应该覆盖图片代码本身的宽度/高度属性。

Answer 1

我认为所有列都要在bootstrap中正确排列，每行列需要在他们自己的行中，我认为在你的页面中，所有列都在一行中。

Answer 2

我在我正在处理的项目中遇到同样的问题，我的建议是使用<div class="clearfix visible-md-block"></div>你可以根据你想要做的事情改变lg或其他东西的md，在我的情况下我使用php生成我的产品列表，我有它，所以在大屏幕上我有col-lg-3和中等col-md-4，有时因为图像或文字描述不同大小的地方我会有空白，我通过添加计数器变量并使用模数来添加clearfix来修复此问题。

foreach($deal as $element){

                if ($x % 4 ==0) { echo '<div class="clearfix visible-lg-block"></div>';};
                if ($x % 3 ==0) { echo '<div class="clearfix visible-md-block"></div>';};
                    echo '<div class = "col-md-4 col-lg-3">'.print_regular_item($element).'</div>';

                $x++;
            }

Answer 3

这是高度问题，如果您不想定义col-*-* custom class，请定义gird col的高度height定义col-*-*的高度1}}不要创建任何custom class这么简单我还有其他建议，等于col-*-*身高。

将此row-eq-height课程用于row

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

来源：http://getbootstrap.com.vn/examples/equal-height-columns/

Bootstrap元素在Firefox中无法正确堆叠

3 个答案: