css - 更改卡片图像上文本的位置 : Bootstrap

Question

我有一张 Bootstrap 卡片，我想在图像上放置一段文字。所以我有这个:

<div className ="container" id="mainContainer">
  <div className ="row mt-4">
    <div className="col-md-4">
      <div className="card" >
        <img  className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
         </img>
         <div className="card-img-overlay">
           <span className="badge badge-dark"> 1 </span>
         </div>
         <div className="card-body">
           <h5 className="card-title"> Bulbasaur  </h5>
           <span className="badge badge-light"> poison </span>
         </div>
      </div>
  </div>
</div>

我想要这个

但我现在有这个

如您所见，有很多不同之处，但最重要的是元素的位置 - 我无法将它放在我想要的位置。

Answer 1

             <div className ="row">
                <div className="col">
                  <div className="card">
                    <img  className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
                     </img>
                     <div className="card-img-overlay d-flex flex-column justify-content-center" style={{ padding: '0px'}}>
                       <span className="badge badge-dark" style={{ width: '30%'}}> 1 </span>
                     </div>
                     <div className="card-body">
                       <h5 className="card-title"> Bulbasaur  </h5>
                       <span className="badge badge-light"> poison </span>
                     </div>
                  </div>
                </div>  

您可以在此处更改一些内容，但这似乎有效。