使用卡片和 for 循环引导

Posted 2023-03-28

【中文标题】使用卡片和 for 循环引导

【英文标题】：Bootstrapping with card and for loop

【发布时间】：2021-02-25 00:37:21

【问题描述】：

我正在尝试在我的 .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" > -->
                  <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>

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

【参考方案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" > -->
            <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 应该是父级。

【讨论】：

这让我在卡片中的所有内容都变得非常狭窄

@JamesLee 尝试使用.col-6 或.col-4... 有用吗？

还是一样的结果。似乎 for 循环正在为所有条目设置左侧位置并将每个条目识别为新条目

@JamesLee 你能告诉我在JSBin.com 或CodePen.io 之类的服务中生成的完整代码吗？

我实际上在 html 文件中有 cmets，一旦我删除它们，您的代码就完全可以工作了！