-3

这是初始标记：

<div class="product-related-products">
<div class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Related products</strong></span>

</div>
<div class="product-field product-field-type-R">product1</div>
<div class="product-field product-field-type-R">product2</div>
<div class="product-field product-field-type-R">product3</div>
<div class="product-field product-field-type-R">product4</div>
<div class="product-field product-field-type-R">product5
    <div class="clear"></div>
</div>

我需要将这些 div.product-field.product-field-type-R 放入 bootstrap 3 网格系统中，其中 4 列的屏幕大于超小屏幕这是我的最终标记：

<div class="product-related-products">
<div class="row product-fields-title-wrapper"><span class="product-fields-title"><strong>Related products</strong></span>
</div>
<div class="row">
    <div class="col-sm-3 col-xs-6 product-field product-field-type-R">product1</div>
    <div class="col-sm-3 col-xs-6 product-field product-field-type-R">product2</div>
    <div class="col-sm-3 col-xs-6 product-field product-field-type-R">product3</div>
    <div class="col-sm-3 col-xs-6 product-field product-field-type-R">product4</div>
    <div class="col-sm-3 col-xs-6 product-field product-field-type-R">product5</div>
</div>

我是否应用了 bootstrap 3 网格系统？

4

1 回答 1

0

是的，您已经正确应用了网格类。

根据您所应用的，当在移动设备上显示时，div 将是一半宽度，然后在任何更大的设备上显示时是四分之一宽度。

于 2015-06-05T14:43:47.193 回答