更改卡片图像上的文本位置：Bootstrap答案

【问题标题】：Change position of text over a card image: Bootstrap更改卡片图像上的文本位置：Bootstrap
【发布时间】：2019-09-22 06:52:13
【问题描述】：

我有一张引导卡，我想在图像上放置一个文本。所以我有这个：

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

我想要这个

但我目前有这个

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

【问题讨论】：

你这里必须有一些自定义的 CSS 吗？请分享所有相关代码。
我没有任何适用于此的自定义 CSS

标签： css reactjs twitter-bootstrap

【解决方案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>

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

【讨论】：