django - 如何修复引导卡模板上的图像大小和位置？

Question

各位晚上好，

一旦用户从移动版本看到网站，我试图避免卡片的图像（通过引导程序实现）转移到卡片的顶部。

问题如下：

<div class="card mb-3" style="max-width: 540px;">
                  <div class="row no-gutters">

                      {% if post.immagine %}
                        <div class="col-md-4">
                          <img src="{{ post.immagine.url }}" class="card-img" width="200" height="260">
                        </div>
                      {% else %}
                        <div class="col-md-4">
                        </div>
                      {% endif %}

                    <div class="col-md-8">
                       
                      <div class="card-body">
                        <h5 class="card-title">{{ post.nome }} {{ post.cognome }} -

             

                         </h5>

                          <a href="{% url 'prova-detail' post.pk %}" class="btn btn-dark" style="background-color: #282d4c;">Leggi</a>
                          <p class="card-text"></p>
                      </div>

                        {% else %}

                      <div class="card-body" style="text-align:center">
                        <h5 class="card-title">{{ post.nome }} {{ post.cognome }}</h5>

                    </div>
                  </div>
                </div>

       {% endfor %}

Answer 1

bootstrap 包含 12 个 cols 来呈现内容

如果你写：

<div class="col-md-4"></div>  
<div class="col-md-8"></div>

这意味着左列获得内容的 1/3，右列获得 2/3。

col-md-* 中的 md 意味着这只适用于所有大于 md 的分辨率（我认为它是平板电脑）

只需摆脱 md 就可以了

<div class="col-4"></div>  
<div class="col-8"></div>