如何在 jinja2 中为每个循环水平显示引导卡？

Question

我很难以水平方式显示使用每个循环的引导卡，因为它将按标准垂直显示。

这是我的代码

<div class="row">
   <div class="col-lg-12">
            {% for game in gamest %}
            <div class="card card-inverse card-primary " style="width: 20rem;">
              <div class="card-block">
                <div class="text-xs-center">
                  <ul class="pagination">
                <p class="card-title"><b>{{ game['status2'] }}</b></p>
                <p class="card-title">{{ game['matchtype2'] }}</p>
                <p class="card-title">{{ game['teams2'] }}</p>
                {% if game['Batting team'] %}
                <p class="card-text">{{ game['Batting team'] }}<b>{{" "}}{{ game['runs10'] }}/{{ game['wickets10'] }}{{" "}}({{ game['overs10'] }}{{" "}}ov)</b></p>
                {% endif %}
                <p class="card-text">{{ game['name1'] }}{{" "}}<b>{{ game['runs1'] }}</b></p>
                <p class="card-text">{{ game['name2'] }}{{" "}}<b>{{ game['runs2'] }}</b></p>
                {% if game['name5'] %}
                <p class="card-text">{{ game['name5'] }}{{" "}}<b>({{ game['wickets5'] }}{{" "}}w)</b></p>
                {% endif %}
              </ul>
            </div>
            <div class="btn-group pull-right row">
  <div class="col-md-4"><a href="/Scorecard/{{ game["scorecardid"]}}" class="btn btn-primary btn-sm">Scorecard</a></div>
  <div class="col-md-1"></div>
  <div class="col-md-4"><a href="/Commentary/{{ game["commentaryid"]}}" class="btn btn-primary btn-sm">Commentary</a></div>
 </div>
              </div>
            </div>
            {% endfor %}
   </div>

这就是我得到的

Answer 1

您应该删除卡片上的宽度 (style="width: 20rem;)，并将每张卡片包含在网格列中。然后，在循环中迭代col-lg-3...

<div class="row">
    {% for game in gamest %}
       <div class="col-lg-3">
                <div class="card card-inverse card-primary ">
                  <div class="card-block">
                    <div class="text-xs-center">
                      <ul class="pagination">
                    <p class="card-title"><b>{{ game['status2'] }}</b></p>
                    <p class="card-title">{{ game['matchtype2'] }}</p>
                    <p class="card-title">{{ game['teams2'] }}</p>
                    {% if game['Batting team'] %}
                    <p class="card-text">{{ game['Batting team'] }}<b>{{" "}}{{ game['runs10'] }}/{{ game['wickets10'] }}{{" "}}({{ game['overs10'] }}{{" "}}ov)</b></p>
                    {% endif %}
                    <p class="card-text">{{ game['name1'] }}{{" "}}<b>{{ game['runs1'] }}</b></p>
                    <p class="card-text">{{ game['name2'] }}{{" "}}<b>{{ game['runs2'] }}</b></p>
                    {% if game['name5'] %}
                    <p class="card-text">{{ game['name5'] }}{{" "}}<b>({{ game['wickets5'] }}{{" "}}w)</b></p>
                    {% endif %}
                  </ul>
                </div>
                <div class="btn-group pull-right row">
                  <div class="col-md-4"><a href="/Scorecard/{{ game["scorecardid"]}}" class="btn btn-primary btn-sm">Scorecard</a></div>
                  <div class="col-md-1"></div>
                  <div class="col-md-4"><a href="/Commentary/{{ game["commentaryid"]}}" class="btn btn-primary btn-sm">Commentary</a></div>
                   </div>
                  </div>
             </div>
      </div>
      {% endfor %}
</div>

另外，btn-group 不应与row>cols 结合使用。我不确定您要对按钮行做什么。