使用卡片和 for 循环引导

Question

我正在尝试在我的 .html 中实现卡片引导，但无法使其居中。请看下面的代码和帮助

<h1> 10 Games Recommended Based on {{ selected }} </h1>

        <div class = "container">
        
        <div class="recommendations">
  
            {% for name in names_list %}
            <div class="card-group">
                <div class="card text-center" style="Max-width: 30%;">
                  <!-- <img src="..." class="card-img-top" alt="..."> -->
                  <div class="card-body">
                    <h5 class="card-title"> <a href = "{{ games[name]['url'] }}" target = "popup">{{ name }}</a></h5>
                    <div class = 'card-body'>
                        <p1 class = "card-text">Overall Reviews: {{games[name]['rating'] }}</p1>
                    </div>
                  </div>
                </div>
            </div>
            {% endfor %}
        
        </div>
        </div>

我为混乱道歉，但我的应用程序给出结果的方式被推到左边，比如this。

下面是我的风格

<style>
            p {font-size: 30px;}
            p1 {font-size: 13px;}
            a {color:navy;
                font-size: 20px;}
            body {text-align: center;}
            body {background-color: lightblue;}        
</style>

在使用循环时，我是否可以将它们居中或并排对齐？

Answer 1

您缺少.row 和.col 课程。添加它们即可。

<h1>10 Games Recommended Based on {{ selected }}</h1>

<div class="container">
  <div class="row">
    <div class="recommendations">
      {% for name in names_list %}
      <div class="col-3">
        <div class="card-group">
          <div class="card text-center" style="max-width: 30%">
            <!-- <img src="..." class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title">
                <a href="{{ games[name]['url'] }}" target="popup">{{ name }}</a>
              </h5>
              <div class="card-body">
                <p1 class="card-text"
                >Overall Reviews: {{games[name]['rating'] }}</p1
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

请注意，.col-3 应该是重复的，.row 应该是父级。