时间戳

首页 > 解决方案 > 如何在引导卡中添加图像？

html - 如何在引导卡中添加图像？

问题描述

我正在尝试在卡片的特定区域附加图像，但我不知道如何。如果这是一个非常愚蠢的问题，我很抱歉，我是 html 方面的初学者。那么有人可以告诉我怎么做吗？这将非常有用。

我正在使用 Django。例如，如果我想在特定的蓝色轮廓区域添加图像，我应该怎么做？ 在此处输入图像描述

我的代码

{% for fixture in fixtures %}
  <div class="card bg-light">
    <div class="card-header" style="color:red;" >
      Featured
    </div>
    <div class="card-body">
    <h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
    <p class="card-text" style="color:black;">{{ fixture.description }}</p>
    <form style="color:black;">
      <h5><label for="watching">Watching?</label>
        <input type="checkbox" id="watching" name="watching" value="watching">
      </h5>
    </form>
  </div>
 </div>
{% endfor %}

标签： htmldjango

解决方案

试试这个

<div class="card bg-light">
    <div class="card-header" style="color:red;" >
      Featured
    </div>

    <div class="card-body">
      <div class="row">
        <div class="col col-md-6">
            <h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
          <p class="card-text" style="color:black;">{{ fixture.description }}</p>
          <form style="color:black;">
            <h5><label for="watching">Watching?</label>
              <input type="checkbox" id="watching" name="watching" value="watching">
            </h5>
          </form>
        </div>

        <div class="col col-md-6">
          <img src="https://lab.oliveiraweb.com.br/images-for-samples/owl.jpg" class="img-fluid">
        </div>
      </div>
    </div>
  </div>

推荐阅读