如何在 bootstrap 卡片模板上固定图像大小和位置？

Question

大家晚上好，

我试图避免当用户从移动版本看到网站时，卡片的图像（通过 bootstrap 实现）转移到卡片的顶部。

问题如下：

<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 列组成以呈现内容

如果你写：

<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>

如何在 bootstrap 卡片模板上固定图像大小和位置？

How to I fix the image size and position on a bootstrap card template?

django

image

bootstrap-4

card