Question

我希望Bootstrap卡水平显示而不是垂直显示，但是我发现每次希望下一张卡水平显示时都必须声明一个新的“ col-sm-4”。问题是，如果我尝试在Jinja“ for”循环中执行此操作，它将重复同一张卡。除了Jinja，有没有办法像“ while”循环那样遍历数据？

以下是相关的Python代码：

使用feedparser软件包从“ feeds.py”中获取

：

def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc

这是“ views.py”中与此相关的Flask代码

@app.route("/")
def index():
    articles_bbc = get_news("bbc")
    articles_cnn = get_news("cnn")
    articles_google = get_news("google")
    return render_template('index.html', articles_bbc=articles_bbc[:3])

最后是相关的html-bootstrap和Jinja2代码：

<div class = "row" style="background-color: lightgray;">
            <div class = "col-sm-4">


         <h5>Headlines from the BBC</h5>




                    {% for article_bbc in articles_bbc %}
                        <div class="card" style="width:200px;float:left;">
                            <div class="card-body" style="background-color:lightcyan;">


                                {%  if article_bbc.image %}
                                <img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
                                {% endif %}
                                <h5 class="card-title">{{article_bbc.title}}</h5>
                                    <p class="card-text">{{article_bbc.summary}}</p>
                                    <p>{{article_bbc.published}}</p>
                                    <a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
                            </div>



                        </div>
                    {% endfor %}
            </div>
        </div>

Answer 1

弄清楚了。在“ col-sm-4”之前正确放置“ for”循环可以纠正它！

烧瓶，自举卡和Jinja模板

1 个答案: