Question

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

两件物品   一个项目
  两个项目
  一件物品

每个项目行都有一个大面积的空白区域，项目可以在其中。

下面的代码显示了一个＆＃34;行＆＃34;这是三列布局。我用javascript更改了课程＆＃39; col-sm-4＆＃39;到＆＃39; col-sm-6＆＃39;。我的错误在哪里？

    <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>

Answer 2

问题解决了。我只需删除所有行并调整JS以添加类

Bootstrap动态布局更改

2 个答案: