Django中的Bootstrap网格系统

时间:2019-03-26 15:51:35

标签: twitter-bootstrap django-templates django-bootstrap3

我在Django模板中有以下代码:

<section>
        <div class="container">
            <div class="row">

                <div class="col-sm-12">


                    <div class="features_items"><!--products --- features_items-->
                        <h2 class="title text-center">Recommended for you</h2>
                        {% for p in post|slice:":12" %}

                            <div class="col-sm-4" , id="items">
                                <div class="product-image-wrapper">
                                    <div class="single-products">
                                        <div class="productinfo text-center  shadow p-3 mb-5 bg-white rounded" style="
                                        border-style: solid;
                                        border-width:0.1px;
                                         color: #E0E0E0;">
                                            <a href="{{ p.product_url }}"><img src="{{ p.product_image }}" alt=""/></a>

                                            <h6 style="color: #666663"> {{ p.product_price }} &#2547; </h6>
                                            <a href="{{ p.product_url }}"><p>{{ p.product_name|truncatewords:5 }}</p>
                                            </a>

                                            <a href="#" style="color: #06c1bc;"><span
                                                    class="glyphicon glyphicon-heart-empty"></span> Like</a>
                                            <a href="{{ p.product_url }}"
                                               style="color: #06c1bc; padding-left: 10px"><span
                                                    class="glyphicon glyphicon-eye-open"></span> Detail</a>
                                        </div>

                                    </div>
                                    <div class="choose">
                                        <ul class="nav nav-pills nav-justified">
                                            {#                                      <li><a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-heart"></span> Like</a></li>#}
                                            {#                                      <li><a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-thumbs-down"></span> Unlike</a></li>#}
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        {% endfor %}


                    </div><!--Recommended Products-->


                </div>

            </div>
        </div>
    </section>

这给了我以下输出https://drive.google.com/file/d/1PmKCKKIm7QcyamICYG3J9iG0eBm_8DEi/view?usp=sharing

但是我要在一行中显示这些项目,这意味着每行中将显示3个项目。我应该对代码进行哪些更改?

0 个答案:

没有答案