使用 Django For 循环的内联引导卡答案

【问题标题】：Inline Boostrap Cards using Django For Loop使用 Django For 循环的内联引导卡
【发布时间】：2020-08-18 06:56:26
【问题描述】：

我正在使用 Bootstrap 使我的网站循环更好，但是由于我使用 Django For 循环来呈现信息，因此无法将卡片组织成水平线：

html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Coaches</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        {% for programas in programas_entrenamiento %}
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="{{programas.foto_programa.url}}" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">{{programas.programas}}</h5>
                <p class="card-text">{{programas.descripcion|truncatechars:50}}</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        {%endfor%}
    </div>

models.py

class ProgramasEntrenamiento(models.Model):

    programas = models.CharField(
        choices=EXERCISE_CHOICES, max_length=200, null=True)
    descripcion = models.TextField()
    foto_programa = models.ImageField(upload_to='pics/programas', null=True)

    def __str__(self):
        return self.programas

电流输出

预期输出 （抱歉编辑不好）

【问题讨论】：

标签： css django bootstrap-4

【解决方案1】：

不是django，是bootstrap-4 grid system，你也可以用w3schools tutorial for bootstrap 4 grid system

【讨论】：