bootstrap-4 - 如何使用 django 上的引导程序使 jinja2 模板随屏幕大小变化？

Question

Django 3.0，jinja2 引导程序 4

我有一张桌子，里面有 6 列。这张表在网站上看起来很棒，但在手机上看起来绝对可怕。我使用引导程序进行行和列处理。我不希望用户必须在移动设备上左右滚动。那么我该如何使用 jinja2 模板呢？我对结果如何持开放态度。我的猜测是它看起来像

电流输出

Computer:
1,2,3,4,5,6
x,x,x,x,x,x
y,y,y,y,y,y

期望的输出

col-sm-? device
1,2,3
x,x,x
x,x,x
y,y,y
y,y,y

下面是表格的代码

 <div class='container'>
        <table class="table document-list">
            <thead>
            <tr>
                <div class='row'>
                    <div class='col-12 col-md-6'>
                        <th>#</th>
                        <th>File</th>
                        <th>Description</th>
                    </div>
                    <div class='col-12 col-md-6'>
                        <th>a</th>
                        <th>b</th>
                        <th>c</th>                        
                    </div>
                </div>
            </tr>
            </thead>
            <tbody class='document-body'>
                {% for instance in object_list %}
                        <tr class='contract-product'>
                            <div class='col-12 col-md-6'>
                                <th scope="row">{{ forloop.counter }}</th>
                                <td>{{ instance.filename }}</td>
                                <td>{{ instance.description }}</td>
                            </div>
                            <div class='col-12 col-md-6'>
                                <td><a href="{{ instance.get_download }}" class="btn btn-primary">Download</a></td>
                                <td><a href="{{ instance.get_download }}?preview=True" class="btn btn-primary">Preview</a></td>
                                <td><a href="{{ instance.get_download }}" class="btn btn-secondary">Remove</a></td>
                            </div>
                        </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>
</div>

标签： bootstrap-4jinja2django-3.0