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＆gt; cols合并。我不确定你要用按钮行做什么。

如何在每个循环中在jinja 2中水平显示自举卡？

1 个答案: