html - 如何在 jinja 2 中为每个循环水平显示 Bootstrap 卡？

Question

我很难以水平方式显示用于每个循环的 Bootstrap 卡，因为它会按标准垂直显示。

这是我的代码

<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 不应与 rowcols 结合使用。我不确定您要对按钮行做什么。