html - Bootstrap 动态布局更改

Question

我目前正在一个显示电子商务商店的网站上使用 Bootstrap 。当前布局是 4 行内的 3 列元素，但我想实现一个按钮，将其更改为 2 列。
我已经这样做了，但是代码似乎导致了一些问题，因为布局更改为

Two Items
One Item
Two Items
One Item

每个 Item 行都有一大片空白区域，可以放置一个元素。

下面的代码显示了三列布局中的一个“行”。我使用了将类“col-sm-4”更改为“col-sm-6”的 javascript。我的错误在哪里？

    <div class="row"><!-- row 2 -->
    <div class="col-sm-4 product-category-display">
        <div class="row">
            <img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
        </div>
        <div class="row product-status">
            <span class="products-status-sale">Sale</span>
        </div>
        <div class="row">
            <p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
        </div>
        <div class="row product-price">
            <span>£99.00</span>
        </div>
    </div>
    <div class="col-sm-4 product-category-display">
        <div class="row">
            <img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
        </div>
        <div class="row product-status">
            <span></span>
        </div>
        <div class="row">
            <p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
        </div>
        <div class="row product-price">
            <span>£99.95</span>
        </div>
    </div>
    <div class="col-sm-4 product-category-display">
        <div class="row">
            <img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
        </div>
        <div class="row product-status">
            <span></span>
        </div>
        <div class="row">
            <p></p>
        </div>
        <div class="row product-price">
            <span></span>
        </div>
    </div>
</div><!-- end row 2 -->  

Answer 1

列加起来最多只能为 12。当您将 4 更改为 6 时，它会变成 18。

<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>