如何使用 Bootstrap 网格切换网站右侧的 javascript 面板？

Question

我想模仿http://www.chaldal.com的购物袋功能你会在右边看到一个显示摘要的小框，但是如果你点击它，它会展开并永久占据右侧两列。我用 Bootstrap 为项目列表创建了六列。我猜我可以创建一个绝对位置的小盒子。如何创建扩展的购物袋，它需要正确的两列显示并且即使我浏览网站也不会消失。另外，我使用以下代码在 6 列中显示项目。

<div id="product-list" class="row">
    {% for item in items %}
        <div class="col-sm-2">
            <h5 class="text-center">{{ item.name }}</h5>
            {% widthratio item.height item.width 150 as height %}
            {% if item.image %}
                <img src="/{{ item.image }}" height="{{ height }}" width="150"/>
            {% else %}
                <img src="{% static 'default_images/default_medicine.jpg' %}" width="150"/>
            {% endif %}
            Tk. {{ item.mrp }} / {{ item.unit }}
        </div>
        {% if forloop.counter|divisibleby:6 %}
    </div>
    <div class="row">
        {% endif %}
    {% endfor %}
    </div>

如何在购物袋打开时将其更改为四列？被数字整除的也必须改变。

Answer 1

在 chaldal.com 中，发生的情况是，当您单击小按钮时，它会将所有容器内容推送到 300 像素的内边距，因此将引导程序中的列设置为更小的宽度的一种方法是更改容器宽度百分比。在引导程序中，如果您将面板设置为 col-lg-6，当达到该屏幕分辨率的设备时，它只会改变其宽度。因此，例如对于 6 列，它将是 50% 的宽度，如果您想更改该宽度列，您最好的展示是在列类的末尾添加另一个类，如下所示：

<div class="col-sm-2 newClass"></div>

在您的 javascript 中，您可以指定填充、宽度、固定右定位或任何您想要更改已具有这些列布局的类的内容。

希望这会有所帮助。