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中，当你点击小按钮时，它会以300px的填充推送所有容器内容，因此将引导程序中的列设置为较小宽度的一种方法是更改容器宽度百分比。在bootstrap中，如果将面板设置为col-lg-6，当达到该屏幕分辨率的设备时，它只会改变其宽度。因此，例如对于6列，它将是50％宽度，如果要更改该宽度列，最佳显示是在列类的末尾添加另一个类，如下所示：

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

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

希望这有帮助。

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

1 个答案: